Frontender`s Spectre - бот Telegram, который собирает контент для фронтенд-разработчиков в одном месте. Бесплатно.
эффект при наведении на JS и CSS3

Stack Motion эффект изображений при наведении на JavaScript и CSS3

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

Автор использует плагин Anime.js, а также свой небольшой скрипт и возможности CSS3 – preserve-3d и transform-origin. Практических применений можно найти множество. Например: у Вас имеется страница с готовым фотоальбомов. Вы используете одну картинку в качестве превью и набрасываете ей один из эффектов, приведенных на демо страницу. В результате, у пользователя создается ощущение множественного выбора, который он и получает, кликнув на картинку.

Код для использования на личных проектов рекомендуется взять из исходных файлов (ссылка «Скачать» выше). Каждый отдельный блок с графиков оборачивается в следующую конструкцию:

<div class="grid grid--effect-vega">
	<a href="#" class="grid__item grid__item--c1">
		<div class="stack">
			<div class="stack__deco"></div>
			<div class="stack__deco"></div>
			<div class="stack__deco"></div>
			<div class="stack__deco"></div>
			<div class="stack__figure">
				<img class="stack__img" src="img/1.png" alt="Image"/>
			</div>
		</div>
		<div class="grid__item-caption">
			<h3 class="grid__item-title">anaerobic</h3>
			<div class="column column--left">
				<span class="column__text">Period</span>
				<span class="column__text">Subjects</span>
				<span class="column__text">Result</span>
			</div>
			<div class="column column--right">
				<span class="column__text">2045</span>
				<span class="column__text">133456</span>
				<span class="column__text">Positive</span>
			</div>
		</div>
	</a>
	<a href="#" class="grid__item grid__item--c2"><!-- ... --></a>
	<a href="#" class="grid__item grid__item--c2"><!-- ... --></a>
</div><!-- /grid -->

где, grid grid—effect-vega – это общая обертка анимированных блоков, а класс grid__item grid__item—c1 задает вариант анимации при наведении. Также не забудьте подключить .js и .css файлы.