Некоторые креативные и изысканные эффекты при наведении с использованием современных техник 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