Как делают такой хавер эффект?
Не могу понять как делают подобные хаверы, даже не знаю с какой стороны подступиться, одним только box-shadow тут явно не обойтись.. Добавлять в разметку парочку дивов единственный вариант? P.S.изображение с пинтереста, так что посмотреть код не получится)
Отслеживать
109k 23 23 золотых знака 112 112 серебряных знаков 374 374 бронзовых знака
задан 14 июл 2021 в 16:53
476 2 2 серебряных знака 10 10 бронзовых знаков
Вангую изменения репутации от тех кто ждал когда GIFка прогрузится 🙂
14 июл 2021 в 16:56
Лол, я думал я один ждал эффектов 🙂
14 июл 2021 в 16:59
@ Как делают подобные хаверы @ пикча с пинтреста — а кто сказал, что их делают? xD
14 июл 2021 в 17:04
А так, да, единственный вариант — это добавлять обертку над картинкой.
14 июл 2021 в 17:05
данный вопрос в виде картинки следует закрыть, потому что он бесполезен для базы знаний (тот, у кого возникнет подобный вопрос, не сможет найти данный вопрос и ответы к нему)
14 июл 2021 в 20:50
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
.container
В качестве нескольких анимированных теней используются прямоугольники, которые изначально расположены под картинкой и при hover вращаются в разные стороны.
Центр вращения прямоугольников вычисляется с помощью метода JS getBBox():
Update
Вариант с добавлением тени с SVG фильтрами
.container
Последовательное появление теней
Каждая новая тень появляется с задержкой после окончания предыдущей анимации
:hover
CSS псевдокласс :hover срабатывает, когда пользователь наводит на элемент мышью, но не обязательно активирует его. Этот стиль может переопределяться другими относящимися к ссылкам псевдоклассами, такими как :link , :visited и :active , появляющимися в соответствующем порядке. Чтобы стилизировать ссылки должным образом, вставьте правило :hover после правил :link и :visited до :active , как определено LVHA-порядком: :link — :visited — :hover — :active .
Псевдокласс :hover может применяться к любому псевдоэлементу. Экспериментальная возможность
Браузеры, такие как Firefox, Internet Explorer, Safari, Opera или Chrome, применяют соответствующий стиль, когда курсор (указатель мыши) наводится на элемент.
Примечание: на сенсорных экранах :hover проблемный или не работает. В зависимости от браузера, псевдокласс :hover может никогда не сработать, или сработать на некоторое время после нажатия на элемента, или может продолжать действовать даже остаться после того, как пользователь коснулся элемента до нажатия на другой элемент. Так как сенсорные устройства очень распространены, то веб-разработчикам очень важно не иметь контент, доступный только при наведении, так как такой контент неудобно или невозможно использовать на таких устройствах.
Примеры
:link:hover outline: dotted red; > .foo:hover background: gold; >
Выпадающее меню
С псевдоклассом :hover вы можете создавать сложные каскадные алгоритмы. Эта техника часто используется, например, чтобы создать выпадающие меню на чистом CSS (только на CSS, без использования JavaScript). Сущность этой техники — создание правил, типа следующего:
div.menu-bar ul ul display: none; > div.menu-bar li:hover > ul display: block; >
применим к HTML структуре типа следующей:
div class="menu-bar"> ul> li> a href="example.html">Менюa> ul> li> a href="example.html">Ссылкаa> li> li> a class="menu-nav" href="example.html">Подменюa> ul> li> a class="menu-nav" href="example.html">Подменюa> ul> li>a href="example.html">Ссылкаa>li> li>a href="example.html">Ссылкаa>li> li>a href="example.html">Ссылкаa>li> li>a href="example.html">Ссылкаa>li> ul> li> li>a href="example.html">Ссылкаa>li> ul> li> ul> li> ul> div>
Галерея полноразмерных изображений и превью
Вы можете использовать псевдокласс :hover , чтобы создать галерею изображений с полноразмерными картинками, показываемыми при наведении на них мыши. Посмотрите это демо.
Примечание: Для аналогичного эффекта, но основанного на псевдоклассе :checked (применяется к скрытым радиокнопкам), смотрите это демо, взятое со страницы ru/CSS/:checked.
Спецификации
| Specification |
HTML Standard
# selector-hover |
Selectors Level 4
# the-hover-pseudo |
Поддержка браузерами
BCD tables only load in the browser
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 7 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Hover-эффекты для изображений с помощью CSS
Самая распространенная функция hover-эффектов — это выделение ссылок или кнопок текста. Но есть и много других функций.
Hover-эффекты добавляют к веб-сайту элемент интерактивности. Они имеют сильный эффект, когда применяются к изображениям, а также имеют большое влияние на пользователя, так как эти эффекты помогают создать хорошо спроектированный веб-сайт.
Hover — это эффект при наведении курсора мыши на какой-нибудь элемент. Он часто используется для стилевого оформления, а также для удобства и простоты использования.
Здесь вы узнаете, как создать креативные hover-эффекты для изображений, используя только CSS.
1. Создайте HTML
- Добавьте тег с классом «image». Тег используется для указания независимого контента.
- Используйте тег , чтобы создать надпись или пояснение для контента внутри тега .
figure img src="https://images.unsplash.com/photo-1546146830-2cca9512c68e?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" /> W3docs
2. Добавьте CSS
- Установите max-width, min-width и max-height изображения.
- Установите position в relative.
- Установите overflow в hidden, чтобы контент был срезан и поместился в блок.
- Установите цвет для figcaption и выравнивание текста.
figure.image < position: relative; overflow: hidden; margin: 10px; min-width: 220px; max-width: 310px; max-height: 220px; width: 100%; background: #000000; color: #eeeeee; text-align: center; >
- Добавьте transition для класса image. Мы используем селектор * (asterisk), который выделяет все элементы документа.
figure.image * < -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; >
- Установите max-width изображения в 100%.
- Установите степень прозрачности элемента.
figure.image img < max-width: 100%; position: relative; opacity: 0.6; >
Нашим следующим шагом будет добавление стиля к h3.
- Установите background и position для h3.
- Задайте свойство transform. Оно указывает 2D или 3D трансформацию элемента. Данное свойство позволяет вращать, масштабировать, сдвигать элемент.
- Задайте text-transform со значением uppercase для установления символов верхнего регистра.
- Задайте font-weight. Здесь мы установили значение в 400.
figure.image h3 < position: absolute; left: 50px; right: 50px; display: inline-block; background: #000; -webkit-transform: skew(-5deg) rotate(-10deg) translate(0, -50%); -moz-transform: skew(-5deg) rotate(-10deg) translate(0, -50%); -ms-transform: skew(-5deg) rotate(-10deg) translate(0, -50%); -o-transform: skew(-5deg) rotate(-10deg) translate(0, -50%); transform: skew(-5deg) rotate(-10deg) translate(0, -50%); padding: 15px 5px; margin: 0; top: 50%; text-transform: uppercase; font-weight: 400; >
Теперь добавим стиль к псевдоэлементу :before , что является элементом сгенерированного контента. Он добавляет перед контентом элемент любого типа.
- Установите height и width элемента и задайте цвет.
- Установите transition в transition-duration (0.3).
- Укажите свойство transform . Поверните элемент на 110 градусов и переместите его по оси y на -50%.
figure.image:before < height: 130%; width: 130%; top: 0; left: 0; content: ''; background: #cccccc; position: absolute; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-transform: rotate(110deg) translateY(-50%); -moz-transform: rotate(110deg) translateY(-50%); -ms-transform: rotate(110deg) translateY(-50%); -o-transform: rotate(110deg) translateY(-50%); transform: rotate(110deg) translateY(-50%); >
Следующим шагом установите hover-эффект для изображения, h3 и :before.
figure.image:hover img, figure.image.hover img < opacity: 1; -moz-transform:scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); > figure.image:hover h3, figure.image.hover h3 < -moz-transform:skew(-10deg) rotate(-10deg) translate(-150%, -50%); -ms-transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%); -o-transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%); transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%); > figure.image:hover:before, figure.image.hover:before < -moz-transform:rotate(110deg) translateY(-150%); -ms-transform: rotate(110deg) translateY(-150%); -o-transform: rotate(110deg) translateY(-150%); transform: rotate(110deg) translateY(-150%); >
И наконец, соединим все части нашего кода:
Пример
html> html> head> title>Заголовок документа title> style> figure.image < position: relative; overflow: hidden; margin: 10px; min-width: 220px; max-width: 310px; max-height: 220px; width: 100%; background: #000000; color: #eeeeee; text-align: center; > figure.image* < -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; > figure.image img < max-width: 100%; position: relative; opacity: 0.6; > figure.image h3 < position: absolute; left: 50px; right: 50px; display: inline-block; background: #000; -webkit-transform: skew(-5deg) rotate(-10deg) translate(0, -50%); -moz-transform: skew(-5deg) rotate(-10deg) translate(0, -50%); -ms-transform: skew(-5deg) rotate(-10deg) translate(0, -50%); -o-transform: skew(-5deg) rotate(-10deg) translate(0, -50%); transform: skew(-5deg) rotate(-10deg) translate(0, -50%); padding: 15px 5px; margin: 0; top: 50%; text-transform: uppercase; font-weight: 400; > figure.image:before < height: 130%; width: 130%; top: 0; left: 0; content: ''; background: #cccccc; position: absolute; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-transform: rotate(110deg) translateY(-50%); -moz-transform: rotate(110deg) translateY(-50%); -ms-transform: rotate(110deg) translateY(-50%); -o-transform: rotate(110deg) translateY(-50%); transform: rotate(110deg) translateY(-50%); > figure.image:hover img, figure.image.hover img < opacity: 1; -moz-transform:scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); > figure.image:hover h3, figure.image.hover h3 < -moz-transform:skew(-10deg) rotate(-10deg) translate(-150%, -50%); -ms-transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%); -o-transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%); transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%); > figure.image:hover:before, figure.image.hover:before < -moz-transform:rotate(110deg) translateY(-150%); -ms-transform: rotate(110deg) translateY(-150%); -o-transform: rotate(110deg) translateY(-150%); transform: rotate(110deg) translateY(-150%); > style> head> body> h2> hover-эффект h2> figure class="image"> img src="https://images.unsplash.com/photo-1546146830-2cca9512c68e?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="W3docs"/> figcaption> h3>W3docs h3> figcaption> body> html>
Рассмотрим другой пример трехмерной трансформации:
Пример
html> html> head> title>Заголовок документа title> style> .example < width: 250px; height: 250px; margin: 20px auto 40px auto; perspective: 1000px; > .example a < display: block; width: 100%; height: 100%; background: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg"); background-size: cover; transform-style: preserve-3d; -webkit-transform: rotateX(80deg); -moz-transform: rotateX(80deg); -ms-transform: rotateX(80deg); -o-transform: rotateX(80deg); transform: rotateX(80deg); -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s; > .example:hover a < -webkit-transform: rotateX(10deg); -moz-transform: rotateX(10deg); -ms-transform: rotateX(10deg); -o-transform: rotateX(10deg); transform: rotateX(10deg); > .example a:after < content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 20px; background: #cccccc; -webkit-transform: rotateX(60deg); -moz-transform: rotateX(60deg); -ms-transform: rotateX(60deg); -o-transform: rotateX(60deg); transform: rotateX(60deg); transform-origin: bottom; > style> head> body> h2> hover-эффект h2> div class="example"> a href="#"> a> div> body> html>
CSS3 hover effects. Пошаговый туториал
При создании этого мануала, моей целью было взять три десятка различных эффектов, частью — довольно распространенных, частью — придуманных мной, разместить их от простых к более сложным, и на их примере показать новичкам, никогда не имевшим дело с CSS3 возможностями, как эти возможности работают и как их применить на практике. Именно по этой причине статья вышла подробная, пошаговая, мне было важно описать и разобрать каждую деталь.
Демо материалы лежат здесь.
Предупреждение: эффекты работают только в современных браузерах, поддерживающих возможности CSS3.
Подготовка к работе.
Итак, для того, чтобы создавать наши эффекты нам понадобится вот такая простая дефолтная html-структура:
Title is Here
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.
View More
Для большей части эффектов она останется неизменна, но кое-где нам придется внести ряд изменений. У нас есть div-контейнер с классом .effect, внутри которого помещаем картинку и контейнер с классом .caption, содержащий заголовок, описание и, как в данном случае, кнопку “View More”. Разумеется, структуру менять можно, главное, тогда сделать соответствующие изменения и для CSS-кода.
Дефолтные css-стили для нашей структуры (опять же, в зависимости от того, какой мы будем рассматривать эффект, они будут различаться):
.effect < position: relative; width: 300px; height: 200px; overflow: hidden; >.effect img < width: 100%; height: 100%; >.effect .caption < position: absolute; top: 0px; left: 0px; background: rgba(0,0,0,0.7); width: 100%; height: 100%; color: #fff; >.effect .caption h4 < font-size: 21px; font-weight: 700; text-transform: uppercase; text-align: center; border-bottom: 1px solid white; padding-bottom: 20px; margin-top: 20px; >.effect .caption p < margin: 15px 0px; text-align: center; font-style: italic; padding: 0px 10px; >.effect .caption a.btn
Основы свойства transition. Эффекты #1.1-1.3
Эффект #1.1 заключается в том, что, при наведении мыши на изображение, сверху “выезжает” контейнер .caption с информацией.
Чтобы этого добиться, нужно, в первую очередь, переместить этот контейнер выше, за пределы контейнера с эффектом. Для этого мы изменим ему свойство top, и стили для блока теперь будут выглядеть так:
.effect .caption
Следующим шагом будет добавление к .caption свойства transition. transition показывает, какое именно свойство будет изменяться, насколько быстро, с какой задержкой.
Рассмотрим его поподробнее. Вот так должно будет выглядеть свойство transition для эффекта #1.1:
transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s;
Первое значение устанавливает имя стилевого свойства, которое будет отслеживаться для изменения. В данном случае мы выставили all — отслеживаться будут все свойства. Второе — отвечает за время, необходимое для анимации. Третье — за то, как в течение времени, заданного вторым свойством, будет распределяться скорость перехода: где замедлится, где ускорится. Так, например, в данном случае сначала анимация будет быстрее, к середине замедлится и ближе к концу выйдет на равномерную скорость. Четвертое значение определяет, начнется анимация с задержкой или нет. Если значение равно 0s — задержки нет.
Кроме того, для этого свойства нам надо будет добавить вендорные префиксы. необходимые для корректного отображения анимации в браузерах. Как это выглядит:
-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; — для Chrome и Safari
-o-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; — для Opera
-ms-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; — для IE
-moz-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; — для Firefox
.effect .caption
В статье, для краткости, я буду опускать префиксы, но не забывайте добавлять их для таких свойств, как transition, transform и transform-origin. В коде примеров под кнопкой CSS (или в самих файлах) префиксы тоже есть.
Итак, мы добавили почти все, что необходимо для создания эффекта: начальные условия и условия перехода в конечную точку, осталось добавить только стили для самой конечной точки.
.effect:hover .caption
Эффект #1.2 строится аналогично, только .caption “выезжает” справа налево. Для этого мы вносим незначительные изменения в стили .caption:
.effect .caption < position: absolute; top: 0px; left: 100%; background: rgba(0,0,0,0.7); width: 100%; height: 100%; color: #fff; -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -o-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -ms-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -moz-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; >.effect:hover .caption
А вот в эффекте #1.3 внесены небольшие усложнения. Так .caption движется, как в эффекте #1.1 сверху вниз, но одновременно ему навстречу снизу вверх выдвигается еще один блок.
Чтобы добиться такого эффекта, внесем изменения в html-структуру. Нам необходимо создать пустой div-контейнер с классом .overlay для блока, выезжающего снизу вверх:
Title is Here
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.
View More
Внесем изменения в стили для .caption. Изменим его положение для выдвижения сверху вниз, уменьшим прозрачность вдвое, чтобы сохранить итоговое значение прозрачности фона (в конечном итоге, у нас будут накладываться друг на друга два блока), добавим z-index, чтобы показать, какой из двух блоков будет “выше” при наложении:
effect .caption
Добавим стили для .overlay.
.effect .overlay
Осталось только определить конечную точку трансформаций: .caption опускается до top: 0px, а .overlay, наоборот, поднимается до этого же значения:
.effect:hover .caption, .effect:hover .overlay
Изменяем прозрачность. Добавляем движение отдельных элементов. Эффекты #2.1-#2.3
В эффекте #2.1 элементы выдвигаются из центра к краям. Воспользуемся базовой html-структурой, в которую, для создания этого эффекта, не понадобится вносить никаких изменений.
А вот в css-стили изменения внести понадобится. В первую очередь, необходимо сместить заголовок и кнопку в центр .caption, чтобы задать начальную точку для последующего перехода. Кроме того, необходимо добавить этим элементам свойство transition, поскольку сейчас именно они являются объектами анимирования:
.effect .caption h4 < font-size: 21px; font-weight: 700; text-transform: uppercase; text-align: center; border-bottom: 1px solid white; padding-bottom: 20px; margin-top: 20px; position: relative; top: 62px; transition: all 0.3s linear 0s; >.effect .caption a.btn
Теперь, если мы зададим конечную точку анимации:
.effect:hover h4, .effect:hover a.btn
мы получим не самый красивый результат. Полупрозрачная подложка никуда не делась, элементы кучкуются в центре и неэстетично оттуда разъезжаются. Поскольку, с помощью transition, можно изменять не только положение элемента, но и, например, его прозрачность, благодаря ей мы сможем скрыть и подложку, и элементы в центре до момента, пока не понадобится их подвинуть.
Добавляем прозрачность и transition к .caption:
.effect .caption
Таким образом, сейчас .caption мы спрятали, и чуть позже настроим так, чтобы он появлялся только при наведении мыши. Необходимо добавить прозрачность и для всех элементов внутри .caption, и код для них будет выглядеть так:
.effect .caption h4 < font-size: 21px; font-weight: 700; text-transform: uppercase; text-align: center; border-bottom: 1px solid white; padding-bottom: 20px; margin-top: 20px; position: relative; top: 62px; opacity: 0; transition: all 0.3s linear 0s; >.effect .caption a.btn < width: 120px; text-align: center; display: block; background: #68432d; color: #fff; padding: 10px 0px; border-radius: 5px; margin: 0px auto 0px auto; position: relative; top: -58px; opacity: 0; transition: all 0.3s linear 0s; >.effect .caption p
Теперь на hover будет происходить следующее: прозрачность .caption и элементов внутри нее сменится с opacity: 0 на opacity: 1, одновременно с чем начнет меняться местоположение заголовка и кнопки:
.effect:hover h4, .effect:hover a.btn < top: 0px; opacity: 1; >.effect:hover .caption, .effect:hover p
Эффекты #2.2 и #2.3 построены аналогичным образом, только для эффекта #2.2 заголовок и кнопку мы смещаем сверху вниз и снизу вверх соответственно, а для эффекта #2.3 справа налево и слева направо соответственно.
Изменения, которые необходимо внести в код эффекта #2.1, чтобы получить эффект #2.2:
.effect .caption h4 < font-size: 21px; font-weight: 700; text-transform: uppercase; text-align: center; border-bottom: 1px solid white; padding-bottom: 20px; margin-top: 20px; position: relative; top: -66px; opacity: 0; transition: all 0.3s linear 0s; >.effect .caption a.btn
В остальном, все остается аналогичным.
Ну а чтобы из эффекта #2.1 получить эффект #2.3, изменим следующее:
font-size: 21px; font-weight: 700; text-transform: uppercase; text-align: center; border-bottom: 1px solid white; padding-bottom: 20px; margin-top: 20px; position: relative; left: 300px; opacity: 0; transition: all 0.3s linear 0s; > .effect .caption a.btn < width: 120px; text-align: center; display: block; background: #68432d; color: #fff; padding: 10px 0px; border-radius: 5px; margin: 0px auto 0px auto; position: relative; left: -300px; opacity: 0; transition: all 0.3s linear 0s; >.effect:hover h4, .eff-2-3:hover a.btn
Поговорим о transform и об увеличении/уменьшении элементов. Эффекты #3.1-#3.3
Эффект #3.1 строится на том, что, при наведении, появляются очень увеличенные элементы ,
и , постепенно уменьшающиеся до нормальных размеров.
html-структуру оставляем базовой. Что касается изменений в таблице стилей, уменьшающимся элементам мы должны добавить свойство transform. Transform позволяет трансформировать элементы: вращать, менять им размеры, наклонять, перемещать, комбинировать несколько свойств для создания более сложных эффектов. Для этих эффектов мы разберем уменьшение/увеличение элементов.
Необходимое для такой трансформации значение свойства transform — scale(x,y), где значение x — изменение размеров объекта по горизонтали, а y — по вертикали соответственно. Если мы применим это свойство для ,
и , то получим вот что:
.effect .caption h4
Как видите, у значения scale в данном случае не два параметра, а один, и это означает, что и по горизонтали, и по вертикали наш элемент увеличен в два раза.
.effect .caption p < margin: 15px 0px; text-align: center; font-style: italic; padding: 0px 10px; transform: scale(2); transition: all 0.3s linear 0s; >.effect .caption a.btn
Теперь на hover наша задача уменьшить эти элементы до их нормального размера, что мы и делаем, добавляя эти стили:
.effect:hover .caption h4, .effect:hover .caption p, .effect:hover .caption a.btn
Что касается .caption, как и в разборе эффектов #2.1-#2.3, мы выставляем ему opacity: 0 и очень маленькое время transition, чтобы появление подложки не отвлекало зрителя от основной анимации:
.effect .caption < position: absolute; top: 0; left: 0px; background: rgba(0,0,0,0.7); width: 100%; height: 100%; color: #fff; opacity: 0; transition: all 0.2s linear 0s; >.effect:hover .caption
Эффект #3.2 строится аналогично предыдущему, с тем лишь исключением, что элементы не уменьшаются, а увеличиваются при наведении мыши. Выставим для них такое значение scale: 0.25, все прочие стили остаются аналогичны.
А вот эффект #3.3 — это комбинация из перемещения элементов и изменения их размеров. Как видим, элемент
остается на своем месте и размеры не меняет, для него стили остаются стандартные. Что касается и , наша задача — переместить их наверх и вниз соответственно и уменьшить в размерах:
.effect .caption h4 < font-size: 21px; font-weight: 700; text-transform: uppercase; text-align: center; border-bottom: 1px solid white; padding-bottom: 20px; margin-top: 20px; position: relative; top: -100%; transform: scale(0.25); >.effect .caption a.btn
Теперь надо задать transition, но тут встает такой вопрос: элементы должны сначала — опуститься и лишь после — увеличиться в размерах, то есть, нужно задать transition для опускания элементов без задержки и transition с задержкой для увеличения.
Задать больше одного стилевого свойства для transition — просто: мы всего лишь перечисляем их через запятую, не забыв указать все параметры для каждого свойства:
transition: top 0.3s linear 0s, transform 0.3s linear 0.3s;
Добавим это правило к остальным стилевым правилам:
.effect .caption h4 < font-size: 21px; font-weight: 700; text-transform: uppercase; text-align: center; border-bottom: 1px solid white; padding-bottom: 20px; margin-top: 20px; position: relative; top: -100%; transform: scale(0.25); transition: top 0.3s linear 0s, transform 0.3s linear 0.3s; >.effect .caption a.btn
Задаем конечную точку трансформаций:
.effect:hover .caption h4, .effect:hover .caption a.btn
Осталось только скрыть .caption по образу и подобию двух предыдущих эффектов:
.effect .caption < position: absolute; top: 0; left: 0px; background: rgba(0,0,0,0.7); width: 100%; height: 100%; color: #fff; opacity: 0; transition: all 0.3s linear 0s; >.effect:hover .caption
Крутим элементы: rotate. Задаем “точку вращения”. Эффекты #4.1-#4.4
Чтобы “крутить” элементы, свойству transform необходимо задать значение — rotate и его параметры. Какие параметры есть у значения rotate? Во-первых, ось вращения: X, Y или Z. Во-вторых, количество градусов, на которое будет повернут элемент. Так, например, если мы хотим повернуть элемент по оси Y на 30 градусов, выглядеть правило будет следующим образом:
transform: rotateY(30deg);
Эффекты #4.1-#4.3 построены на вращении элемента .caption вокруг каждой из трех осей, и начнем мы с эффекта #4.1, в котором .caption вращается вокруг оси X. Вот только само по себе вращение не так уж зрелищно, поэтому мы совместим его с изменением размера элемента.
html-структура остается базовой, равно как и стили для ,
и элементов. Изменяться будут лишь стили для .caption, и, в первую очередь, мы добавим новый transform:
.effect .caption < position: absolute; top: 0px; left: 0px; background: rgba(0,0,0,0.7); width: 100%; height: 100%; color: #fff; transform: rotateX(0deg); transition: all 0.4s linear 0s; >.effect:hover .caption
Теперь при наведении мыши элемент крутанется на вышеобозначенное количество градусов. Но хотелось бы, чтобы он не только крутился, но и, в отсутствие hover, исчезал, а на hover не только вращался, но и “выплывал”. Для этого добавим еще один transform со значением scale. Чтобы добавить элементу два и более значений transform, не нужно писать правило дважды, мы просто ставим эти значения через пробел. И поступаем аналогично с hover-стилями:
.effect .caption < position: absolute; top: 0px; left: 0px; background: rgba(0,0,0,0.7); width: 100%; height: 100%; color: #fff; transform: rotateX(0deg) scale(0); transition: all 0.4s linear 0s; >.effect:hover .caption
Теперь .caption не просто вращается вокруг оси, но и словно появляется из глубины картинки.
Эффект #4.2 строится полностью аналогично, только заменяем ось вращения на Y.
Эффект #4.3 строится, опять же, полностью аналогично. Поскольку rotateZ() полностью аналогична записи rotate(), мы просто меняем стили на:
.effect .caption < position: absolute; top: 0px; left: 0px; background: rgba(0,0,0,0.7); width: 100%; height: 100%; color: #fff; transform: rotate(0deg) scale(0); transition: all 0.4s linear 0s; >.effect:hover .caption
Эффект #4.4 сложнее. Он базируется не только на вращении и изменении размера, но еще и на изменении координат точки, вокруг которой совершается вращение, а также на усложненном значении параметра transition-timing-function свойства transition. Но начнем по порядку.
Суть в том, что вращение не может быть само по себе, оно всегда происходит относительно какой-либо точки. Дефолтные координаты этой точки — центр, то есть 50% 50%, но сейчас мы сменим их, чтобы изменить траекторию движения нашего .caption. Задаются координаты свойством transform-origin. Кроме того, давайте добавим transition со значением параметра transition-timing-function — linear:
.effect .caption < position: absolute; top: 0px; left: 0px; background: rgba(0,0,0,0.7); width: 100%; height: 100%; color: #fff; transform: rotate(0deg) scale(0); transition: all 1.1s linear 0s; >.effect:hover .caption
Сейчас эффект выглядит, как очень медленное вращение .caption вокруг оси Z относительно очень смещенной точки вращения. Чтобы усложнить эффект, изменим значение transition-timing-function на cubic-bezier(0.68, -0.55, 0.27, 1.55), что даст нам очень ускоренный выход в анимацию, замедленную середину и небольшой возврат назад в конце. Вот так будет выглядеть окончательный код:
.effect .caption < position: absolute; top: 0px; left: 0px; background: rgba(0,0,0,0.7); width: 100%; height: 100%; color: #fff; transform: rotate(0deg) scale(0); transition: all 1.1s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s; >.effect:hover .caption
Еще немного о scale и transform-origin. Эффекты #5.1-#5.4
Как я уже писала в разборе эффектов #3.1-#3.3, мы можем применять scale не только по двум осям одновременно, увеличивая/уменьшая элемент одновременно в длину и ширину, но и по одной оси. Так, например, в эффекте #5.1 мы видим, как .caption разворачивается из центра по горизонтали, но высота его при этом не меняется.
Для этого элемента html-структура и стили для ,
и остаются базовыми. Изменятся только стили для .caption, который нам надо уменьшить только по оси X:
.effect .caption
И, чтобы произошло увеличение, на hover:
.effect:hover .caption
Эффект #5.2 строится аналогично, только .caption развернется по оси Y, в остальном стили останутся аналогичны предыдущему.
В эффекте #5.3 .caption тоже разворачивается по горизонтали, но не из центра, а от левого края. Чтобы подвинуть точку, от которой происходит переход, применим transform-origin, который, как видим, работает не только в связке с rotate:
.effect .caption
Таким образом, мы смещаем точку, от которой происходит переход, по горизонтали в крайнее левое положение, а по вертикали она так и остается в дефолтном положении — по центру. Прочие стили остаются аналогичными.
Эффект #5.4 аналогичен эффекту #5.3, здесь .caption разворачивается сверху вниз, от верхнего края:
.effect .caption
Точка смещена в крайнее верхнее положение, по горизонтали же — остается по центру. Прочие стили аналогичны.
Как еще можно использовать связку rotate и transform-origin. Эффекты #6.1-#6.3
В эффекте #6.1 при наведении мыши .caption проворачивается, как если бы был закреплен на невидимом гвоздике. Роль “гвоздика” выполняет transform-origin с заданными координатами, а поворот обеспечивает rotate.
html-структура остается базовой, равно как и стили для ,
и . Изменяем только стили для .caption. Давайте, для начала, добавим rotate:
.effect .caption
Теперь .caption оказывается просто повернут вверх ногами. Пусть на hover он будет возвращаться в исходное положение:
.effect:hover .caption
Теперь, при наведении мыши, .caption просто прокручивается вокруг своей оси. Но, если мы изменим координаты точки, вокруг которой происходит переход, и, как в данном случае, перенесем ее наверх по вертикали таким образом:
.effect .caption
Получится следующее: .caption сместится наверх, как если бы мы ему дали top: -100%; потому что сместилась точка, относительно которой он вращается.
Теперь, если мы будем смещать координаты “точки перехода” и изменять направление вращение, то сможем получить различные вариации этого эффекта. Так, например, эффект #6.2 почти полностью аналогичен предыдущему, только transform-origin: center bottom; а направление вращения изменено на противоположное благодаря тому, что исходное значение стало таким transform: rotate(-180deg);
В эффекте #6.3 направление вращения остается таким же, как в #6.2, а “точка перехода” смещена на середину правой стороны контейнера: transform-origin: right center; В остальном, стили остаются теми же самыми.
Поговорим подробнее о delay. Эффекты #7.1-#7.3
Сейчас мы немного нарушим порядок разбора эффектов и начнем с эффекта #7.2, потом перейдем к #7.3, и лишь потом вернемся к #7.1 как к самому сложному из линейки.
Итак, эффект #7.2: при наведении мыши сверху и снизу выезжают два контейнера .overlay и, когда смыкаются, сверху выезжает .caption.
html-структура понадобится такая:
Title is Here
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.
View More
Как видите, у нас добавилось два .overlay-слоя, тех самых, что будут выезжать сверху и снизу.
Что касается стилей: для ,
и стили остаются дефолтные.
Теперь давайте рассмотрим стили для .overlay-контейнеров:
.effect .overlay < background: rgba(0,0,0,0.7); width: 100%; height: 50%; left: 0px; position: absolute; transition: all 0.15s linear 0s; >.effect .overlay-top < top: -100%; >.effect .overlay-bottom
.overlay-top мы убрали вверх, .overlay-bottom — соответственно, вниз, теперь нам нужно, чтобы при наведении мыши они съезжались. Поскольку каждый из них имеет высоту, равную 50% высоты родителя, сделать это просто:
.effect:hover .overlay-top < top: 0px; >.effect:hover .overlay-bottom
Теперь определим вид и поведение .caption, который у нас тоже спускается сверху, а значит, должен быть наверх помещен. Теперь, поскольку .caption появляется после .overlay, было бы логично, что у него будет проставлено значение параметра delay свойства transition:
.effect .caption < position: absolute; top: -100%; left: 0px; background: transparent; width: 100%; height: 100%; color: #fff; transition: all 0.2s linear 0.3s; >.effect:hover .caption
- Наводим мышь на .effect
- Выезжают .overlay
- Появляется .caption
- Снимаем hover
- .overlay возвращаются на свои места
- .caption, благодаря выставленному значению delay, возвращается на место на 0.3s позже, что совсем не входило в наши планы
Мы можем задавать delay не только в стилях самого элемента, но и в стилях его поведения на hover, и в этом будет заключаться наш трюк. Как должны себя вести элементы на hover? Сначала выезжают .overlay и только потом .caption, это значит, что в состоянии hover у .overlay задержка равняется 0s, а у .caption — например, 0.3s
.effect:hover .caption < top: 0px; transition-delay: 0.3s; >.effect:hover .overlay
Но, когда мы снимаем hover, элементы возвращаются к своему обычному поведению, при котором сначала, без всякой задержки, на место возвращается .caption, а затем — .overlay, и, значит, у первого мы должны задержку отменить, а вторым — добавить:
.effect .caption < position: absolute; top: -100%; left: 0px; background: transparent; width: 100%; height: 100%; color: #fff; transition: all 0.2s linear 0s; >.effect .overlay
Вот теперь очередность будет соблюдена, и элементы будут двигаться в правильном порядке.
Эффект #7.3 почти аналогичен предыдущему, разница лишь в стилях для .overlay:
.effect .overlay < background: rgba(0,0,0,0.7); width: 50%; height: 100%; position: absolute; transition: all 0.15s linear 0.4s; >.effect .overlay-top < left: 0; top: -100%; >.effect .overlay-bottom < right: 0; top: 100%; >.effect:hover .overlay
С эффектом #7.1 придется повозиться чуть дольше. Как и #7.3, он отличается от #7.2 только положением и стилями для .overlay, выезжающими сверху справа и снизу слева двумя треугольниками.
Но, конечно, выезжать у нас будут не треугольники, а прямоугольники. Вот общие стили для обоих .overlay:
.effect .overlay
Вот что важно: ширина и высота прямоугольников должна индивидуально подгоняться под размер вашего контейнера с эффектом, равно как и координаты, на которые мы их поместим (и на которые потом передвинем). Что мы делаем: берем наши прямоугольники, разворачиваем на 33 градуса каждый, верхний смещаем к верхнему правому углу контейнера .effect, нижний — к нижнему левому соответственно, а на hover смещаем их до соприкосновения по линии диагонали прямоугольника контейнера .effect:
.effect .overlay-top < top: -158px; left: 142px; >.effect:hover .overlay-top < top: -50px; left: -1px; >.effect .overlay-bottom < top: 192px; left: -244px; >.effect:hover .overlay-bottom < top: 79px; left: -111px; >.effect:hover .overlay
Прочие стили идентичны стилям предыдущих эффектов.
Применяем полученные навыки на практике. Больше трюков! Эффекты #8.1-#10.3
Изюминку этих эффектов составляет bounce-эффект, строящийся на значении параметра transition-timing-function свойства transition для .overlay.
Title is Here
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.
View More
В данном случае .overlay понадобится всего один. Вот такие понадобятся для него стили:
.effect .overlay
Ну а на hover увеличиваем его:
.effect:hover .overlay
Чтобы .caption не отвлекал, все, что мы пропишем для него — это изменение прозрачности:
.effect .caption < position: absolute; top: 0px; left: 0px; background: transparent; width: 100%; height: 100%; color: #fff; opacity: 0; transition: all 0.2s linear 0s; >.effect:hover .caption
Прочие стили остаются дефолтными.
Эффекты #8.2-#8.3 строятся аналогично. Вся разница лишь в том, что в #8.2 используется scaleX(), а в #8.3 — scaleY(), о которых я подробно рассказывала при разборе эффектов #3.1-#3.3
Эффект #9.1 строится на том, что два .overlay появляются по очереди из центра, а следом за ними с небольшим bounce-эффектом выезжает .caption.
Что касается html-структуры, она такова:
Title is Here
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.
View More
Стили для ,
и остаются неизменными. Рассмотрим стили для .overlay:
.effect .overlay
Поскольку .overlay-1 и .overlay-2 вступают в разное время, transition им дадим каждому — свой:
.effect .overlay-1 < transition: all 0.2s linear 0.3s; >.effect .overlay-2 < transition: all 0.2s linear 0.6s; >.effect:hover .overlay
Соответственно, и при снятии hover исчезают они с задержкой относительно друг друга. Поэтому для .overlay-1 мы проставим delay: 0s, а для .overlay-2 — delay: 0.2s (подробнее о влиянии delay на очередность появления и исчезновения элементов я писала при разборе эффектов #7.1-#7.3)
.effect:hover .overlay-1 < transition-delay: 0s; >.effect:hover .overlay-2
Осталось рассмотреть стили .caption:
.effect .caption < position: absolute; top: 0px; left: 100%; background: transparent; width: 100%; height: 100%; color: #fff; transition: all 0.4s cubic-bezier(0.05, -0.24, 0, 1.33) 0s; >.effect:hover .caption
Эффект #9.2 строится аналогично, только .overlay круглые и .caption, как и .overlay, появляется из центра:
.effect .caption < position: absolute; top: 0px; left: 0px; background: transparent; width: 100%; height: 100%; color: #fff; transition: all 0.3s linear 0s; transform: scale(0); >.effect:hover .caption < transform: scale(1); transition-delay: 0.4s; >.effect .overlay < background: rgba(0,0,0,0.35); width: 2px; height: 2px; position: absolute; top: 50%; left: 50%; border-radius: 50%; transform: scale(0); >.effect .overlay-1 < transition: all 0.5s linear 0.3s; >.effect .overlay-2
Прочие стили аналогичны стилям эффекта #9.1
Эффект #9.3 строится следующим образом. Нужна такая html-структура:
Title is Here
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.
View More
Чтобы добиться такого вида для .overlay, мы дадим ему постепенно увеличивающуюся box-shadow:
Изначальное положение для .caption будет: разворот на 180 градусов и opacity: 0. На hover разворачиваем .caption, который, в процессе поворота, становится непрозрачным:
Все остальные стили — дефолтные.
Сначала построим “лесенку”. Каждый .overlay отличается от другого своим местоположением и значением параметра delay:
Самое интересное и сложное здесь — .caption. Вот базовые стили для него:
Теперь нам нужно задать ему положение до начала анимации. Во-первых, развернуть, ведь, когда мы наводим мышь, мы видим, как .caption проворачивается на некоторый угол. Зададим и transform-origin, определяющий точку, вокруг которой будет проходить трансформация. Добавим transform: rotate(-50deg); и transform-origin: 0% 100%;. Следующим шагом будет смещение по вертикали и по горизонтали, чтобы чуть позже обеспечить “выныривание”. Смещать будем с помощью transform: translate(x,y), который сдвигает элемент по оси X и Y соответственно. Наша задача — сдвинуть .caption почти в самый угол по горизонтали и примерно на две трети за пределы контейнера .effects по вертикали:
Теперь нам нужно совсем скрыть .caption до тех пор, пока на контейнер с эффектом не наведут мышь. В этот раз мы спрячем с помощью height: 0px; и overflow: hidden;. Конечные стили такие:
Теперь, чтобы проявить .caption на hover, восстановим его высоту, повернем до rotate(0deg) и вернем на место по горизонтали и вертикали:
и остаются дефолтными.
и .
Интереснее с нижним правым. Поскольку ширина border равна 4px, просто задать ширине и высоте по 100% недостаточно, нужно компенсировать по 8px по вертикали и по горизонтали, чем нам и поможет calc:
Теперь перейдем к .caption и его содержимому. Для .caption стили остаются дефолтными, изменятся они для перемещаемых элементов ,
и , каждый из которых необходимо сместить наверх. Чтобы заголовок не налезал на border подчеркиванием, рассчитаем ему ширину, как и .overlay-2:
Осталось лишь, чтоб элементы опускались на hover, причем в установленном нами порядке:
и . А начнем мы с увеличения картинки:
Ну а что касается .caption — задача в том, чтобы, развернув его на 30 градусов, совместить его правый нижний угол с правым нижним углом картинки и заставить исчезнуть с помощью понижения прозрачности. А его transition, состоит из двух частей:
