Идеи для новых Hover эффектов

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

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

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

Эта статья была обновлена ​​28 октября 2014 года мы добавили второй набор эффектов.

Для разметки мы используем сетку с фигурами:

<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”, является псевдо-элементом с линейным градиентом выезжающий снизу и выявить дополнительный текст.

Заголовок изменит цвет:

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);
}

Мы опустили свойства с префиксами для краткости; Вы найдете их в таблице стилей.

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

Первый набор эффектов:

Второй набор эффектов:

Оригинал / Перевод