Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 17.10.2021, 13:35   #1
Yundiga
 
Регистрация: 01.02.2021
Сообщений: 9
По умолчанию Картинка увеличивается при наведении

Добрый день, уважаемые форумчане, хочу сделать увеличивающуюся картинку при наведении, в html прописала:
Код:
<p> 
		<img src="images/картинка" alt="..."width="250" height="220" class="rightpic" class="scale">
	</p>
в css прописала:
Код:
/* Увеличение изображения */
  
   .scale {
    transition: 1s; /* Время эффекта */
   }
   .scale:hover {
    transform: scale(2); /* Увеличиваем масштаб */
   }
Но картинка так и не увеличивается, как быть? Что делаю не так?
Yundiga вне форума Ответить с цитированием
Старый 17.10.2021, 18:06   #2
Agency
Пользователь
 
Регистрация: 07.10.2017
Сообщений: 99
По умолчанию

попробуйте для начала выбросить все лишнее из <img>
оставьте
<img src="images/картинка" class="scale">

в CSS добавьте высоту и ширину
.scale {
transition: 1s; /* Время эффекта */
width: 250px;
height: 220px;
}

и проверьте как работает, похоже в теге img нет пробела перед width, и из-за этого не работает...
Agency вне форума Ответить с цитированием
Старый 17.10.2021, 22:50   #3
Yundiga
 
Регистрация: 01.02.2021
Сообщений: 9
По умолчанию

Цитата:
Сообщение от Agency Посмотреть сообщение
попробуйте для начала выбросить все лишнее из <img>
оставьте
<img src="images/картинка" class="scale">

в CSS добавьте высоту и ширину
.scale {
transition: 1s; /* Время эффекта */
width: 250px;
height: 220px;
}

и проверьте как работает, похоже в теге img нет пробела перед width, и из-за этого не работает...
Пробел поставила, не работает.
Попробовала убрать лишнее, работает, только картинка гигантских размеров и уходит далеко за пределы экрана.
Yundiga вне форума Ответить с цитированием
Старый 18.10.2021, 18:05   #4
Yundiga
 
Регистрация: 01.02.2021
Сообщений: 9
По умолчанию

У меня была ошибка, я писала так:
Код:
<p> 
		<img src="images/картинка" alt="..."width="250" height="220" class="rightpic" class="scale">
	</p>
а нужно так:
Код:
<p> 
		<img src="images/картинка" alt="..."width="250" height="220" class="rightpic scale">
	</p>
И все получилось.
Спасибо за ответы.
Yundiga вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При наведении мышкой, меняется картинка faraon_forever HTML и CSS 1 29.10.2015 21:58
При наведении курсора на кнопку меняется картинка Kurd57 Мультимедиа в Delphi 4 14.02.2012 19:14
Всплывающая картинка при наведении на другую картинку Z3rique HTML и CSS 8 05.03.2011 22:40
Как сделать чтоб грузилась 2-ая картинка при наведении указателя? Roof Помощь студентам 5 02.08.2007 12:08