Существует множество плагинов для добавления специальных эффектов к изображениям при наведении курсора. Все эти плагины включают в себя огромное количество кода на веб-странице, который может влиять на время загрузки страницы. Если вы хотите избежать проблем с загрузкой страницы, то простой сценарий с эффектом масштабирования изображения - идеальный выбор для вас.

Вы можете легко добавить эффект увеличения изображения при наведении курсора с помощью 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"/>