Привет. Сегодня мы начинаем цикл статей о том, как делается анимация картинки с подписью CSS. Конечно, идей для реализации анимации – множество. Мы рассмотрим самые распространенные примеры, которые вы позже сможете использовать для реализации своего способа анимации.
Немного про анимацию на CSS
В CSS3 есть две возможности реализовать анимацию:
- transition
- keyframes
Transition – позволяет плавно анимировать изменение свойств объекта.
Keyframes – позволяет задавать ключевые точки, между которомы CSS будет сам изменять значение свойств объекта, при этом попутно делая плавный переход.
Подход первый – подпись картинки появляется слайдом вверх
Посмотреть в живую на этот эффект можно в портфолио разработчика сайтов: https://olegmade.com/portfolio/
Рассмотрим как это можно реализовать на HTML и CSS.
Сначала сделает врестку HTML.
<div class="thumbnail">
<div class="img"><img src="/image.jpg"></div>
<div class="caption">Заголовок или подпись</div>
</div>Как видите, здесь нет ничего криминального – просто картинка в блоке, просто текста.
Теперь рассмотрим CSS. Тут есть много подходов, как сделать такую анимацию картинки с подписью. Сегодня разберем следующий подход:
.thumbnail{
overflow: hidden;
position: relative;
display: inline-block;
}
.img{
transition: all 1s;
}
.img img{
display: block;
}
.caption{
position: absolute;
top: 100%;
background: #ccc;
color: red;
font-size: 20px;
height: 50px;
width: 100%;
padding: 10px;
transition: margin-top 1s;
}
.thumbnail:hover .caption{
margin-top: -50px;
}
.thumbnail:hover .img{
margin-top: -50px;
margin-bottom: 50px;
}У thumbnail обрезается всё, что выходит за рамки. Рамки thumbnail определяются размерами картинки. При наведении картинка смещается вверх, а подпись, которая до этого была абсолютно позиционирована ниже нижней границы, тоже выезжает вверх.
Всё это сглажено transition, чтобы переходы выглядели аккуратно и плавно.
Посмотрите, как срабатывает такая анимация при наведеении на картинку (код полностью как приведен выше).