Все чаще пользователи просят нас навести примеры реализации ховер-эффектов. Эти эффекты позволяют не только скрыть, но и оживить необходимые элементы. В сегодняшнем уроке мы предоставим вашему вниманию замечательный набор прикольных ховер-эффектов, в работе которых используются современные CSS техники и 3D эффекты. Такие эффекты станут отличным дополнением для изображений или мультимедийных контентов на ресурсе. Данные ховеры должны Вас вдохновить на собственные, креативные решения для ваших сайтов.
У нас будет пятнадцать эффектов, каждый из которых по своему уникальный и их можно с легкостью применить к своим изображением, и так, давайте посмотрим, что у нас с этого получилось.
Шаг 1. HTML
Разметка одного из элементов будет выглядеть следующим образом:
<div class="grid">
<figure class="effect-lily">
<img src="img/1.jpg" alt="img01"/>
<figcaption>
<h2>Nice <span>Заголовок</span></h2>
<p>Описание изображения</p>
<a href="#">Читать далее</a>
</figcaption>
</figure>
<!-- ... -->
</div>
После общих стилей для всех примеров, перечислены индивидуальные стили для каждого из примеров.
Шаг 2. CSS
Вот к примеру эффект под названием “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);
}
Примеры приведены для получения вдохновения. Надеемся, что данный материал будет вам полезен!
Вот и все. Готово!
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.