Давайте рассмотрим, как сделать эффект небольшого увеличения картинки при наведении курсора на контейнер. Такой эффект может немного оживить страницу, добавить динамики. Я не буду использовать скрипты, эффект работает на CSS3.
Рассмотрим как это работает.
Для начала нам понадобиться картинка для фона. Я закачал на сайт вот эту:
И задал следующие стили для блока:
|
1 2 3 4 5 6 |
.f-block { background: url(/wp-content/uploads/2015/10/private-interior.jpg) no-repeat center center; width: 400px; height: 200px; background-size: 100% 100%; } |
Теперь нужно разобраться с анимацией. При наведении мышки мы будем немного увеличивать картинку, после смещения курсора с контейнера, нужно изобразить уменьшение картинки до её исходных размеров.
Т.к. картинка — это фон контейнера, то она не выйдет за границы этого контейнера, а для манипуляций с масштабом воспользуемся атрибутом background-size.
Опишем анимацию для объекта без наведения:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.f-block { animation-delay: .25s; animation: anm1 0.7s ease forwards; } @keyframes anm1 { from { background-size: 115% 115%; } to { background-size: 100% 100%; } } |
Т.е. мы задаём две точки анимации @keyframes и её скорость (700 мс).
При наведении анимация будет обратная:
|
1 2 3 4 5 6 7 8 |
.f-block:hover { animation: anm2 0.7s ease forwards; } @keyframes anm2 { to { background-size: 115% 115%; } } |
Нам достаточно описать только одну точку (конечную фазу to или 100%), т.к. начальная точка уже описана.
В итоге получим вот такой контейнер (наведите на него курсор мыши):
Вот так совершенно без использования скриптов, удалось произвести симпатичный эффект. Тем не менее минусы здесь есть. Мы не можем, к примеру, определить завершилась ли анимация или ещё нет. При быстром движении мыши, мы увидим скачкообразные переходы одной фазы анимации в другую.
Вариант с увеличением до 200%
Добавил по просьбам трудящихся (в комментариях)…
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
@keyframes anm1 { from { background-size: 200% 200%; } to { background-size: 100% 100%; } } .f-block:hover { animation: anm2 0.7s ease forwards; } @keyframes anm2 { to { background-size: 200% 200%; } } |
115% переписываю, к примеру в 200% почему то не увеличивает, что не так?
Добавил в конец статьи вариант с увеличением до 200%. Все точно также. Только в кейфреймах надо 115 на 200 поменять. Это что, такой тонкий троллинг? :)
что такое троллинг не знаю, но реально не увеличивалось, сейчас снова гляну.
Троллинг — это https://ru.wikipedia.org/wiki/%D0%A2%D1%80%D0%BE%D0%BB%D0%BB%D0%B8%D0%BD%D0%B3
Разобрался, всё, спасибо огромное!!!
А как поставить три изображения друг под другом?
HTML понятна разметка, а со стилями css3 что то ну ни как не разберусь….
Можно и без CSS обойтись. Вот, например, как то так:
<img … >
<br />
<img … >
<br />
<img … >