Как увеличить картинку при наведении?

Как увеличить картинку при наведении?

Увеличить фото на странице сайта можно командой <img src=»/foto/foto_test.jpg» alt=»» class=»photo»>

Где:

/foto/ — папка на хостинге  для хранения фото

/foto_test.jpg — имя рисунка

photo — класс обслуживающий данную функцию:

.photo:hover img {
transform: scale(1.5);
-webkit-transform:scale(1.5); /* Safari, Chrome и Яндекс.Браузер*/
-moz-transform:scale(1.5); /* Firefox */
-ms-transform:scale(1.5); /* IE 9 */
-o-transform:scale(1.5); /* Opera */
}

За изменение масштаба изображения отвечает свойство transform с функцией scale(). В качестве её значения указывается число больше 1 для увеличения масштаба и меньше 1 — для уменьшения масштаба. К примеру, число 1.5 увеличивает масштаб на 50%.

Пример фото с данным кодом:

( Упс! На текущей теме Yelly не работает и нет времени разбираться, кто знает пришлите комментарий ):

Упс! На текущей теме Yelly не работает и нет времени разбираться, кто знает пришлите комментарий.
Проверить данный код можно у себя на сайте, посмотрев результат здесь: holter24.online/test-cod/uvelichenie-kartinki-pri-navedenii-myshki-v-html-i-css/

 

Оцените статью
Добавить комментарии
Как увеличить картинку при наведении?
Защита плагина Contact Form 7 — CAPTCHA
× Спросить