Эффекты при наведении

Некоторые креативные и изысканные эффекты при наведении с использованием современных техник CSS, включая 3D переходы и псевдо-элементы.

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

Методы, которые мы используем для этих эффектов, включают 3D-преобразования и некоторые псевдо-элементы переходов. Обратите внимание, что они будут работать только в современных браузерах.

К сожалению, переходы текста в Firefox не очень гладкие.

Великолепные фотографии высокого разрешения предоставлены сайтом Unsplash, который предоставляет 10 фотографий каждые 10 дней. Иконки используются с Feather icon set от Cole Bemis.

Структура html:

<div class="grid">

	<figure class="effect-lily">
		<img src="img/1.jpg" alt="img01"/>
		<figcaption>
			<h2>Nice <span>Lily</span></h2>
			<p>Lily likes to play with crayons and pencils</p>
			<a href="#">View more</a>
		</figcaption>			
	</figure>

	<!-- ... -->
	
</div>

Некоторые общие стили, определенные для таблицы и ее элементов, затем мы указываем отдельные эффекты.

Следующий эффект, называемый “Sadie”, будет иметь псевдо-элемент с линейным градиентом с появляющимся снизу текстом.

Css для этого эффекта:

figure.effect-sadie figcaption::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%); content: ''; opacity: 0; transform: translate3d(0,50%,0); }

figure.effect-sadie h2 { position: absolute; top: 50%; left: 0; width: 100%; color: #484c61; transition: transform 0.35s, color 0.35s; transform: translate3d(0,-50%,0); }

figure.effect-sadie figcaption::before,
figure.effect-sadie p { transition: opacity 0.35s, transform 0.35s; }

figure.effect-sadie p { position: absolute; bottom: 0; left: 0; padding: 2em; width: 100%; opacity: 0; transform: translate3d(0,10px,0); }

figure.effect-sadie:hover h2 { color: #fff; transform: translate3d(0,-50%,0) translate3d(0,-40px,0); }

figure.effect-sadie:hover figcaption::before ,
figure.effect-sadie:hover p { opacity: 1; transform: translate3d(0,0,0); }

Большую коллекцию эффектов вы найдете в исходниках. Надеемся, что вам понравится!

Перевод статьи: Пимкина Тамара
Источник: tympanus.net