Существует множество плагинов для добавления специальных эффектов к изображениям при наведении курсора. Все эти плагины включают в себя огромное количество кода на веб-странице, который может влиять на время загрузки страницы. Если вы хотите избежать проблем с загрузкой страницы, то простой сценарий с эффектом масштабирования изображения - идеальный выбор для вас.
Вы можете легко добавить эффект увеличения изображения при наведении курсора с помощью CSS и jQuery. В этом руководстве ниже представлены короткие фрагменты кода.
CSS:
img.zoom {
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
}
.transition {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
jQuery:
Подключение библиотеки jQuery.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
Использование события наведения курсора для добавления или удаления класса .transition.
<script>
$(document).ready(function(){
$('.zoom').hover(function() {
$(this).addClass('transition');
}, function() {
$(this).removeClass('transition');
});
});
</script>
HTML:
<img src="img/example.jpg" class="zoom"/>