Сегодня мы начинаем со статей о том, как делается анимация картинки с подписью CSS. Делаем эффект для картинки, где в самом низу изображение будет написаны ключевые слова. Мы рассмотрим самые распространенные примеры, которые вы позже сможете использовать для реализации своего способа анимации.
Немного про анимацию на CSS:
В CSS3 есть две возможности реализовать анимацию:
- transition
- keyframes
Transition – позволяет плавно анимировать изменение свойств объекта.
Keyframes – позволяет задавать ключевые точки, между которомы CSS будет сам изменять значение свойств объекта, при этом попутно делая плавный переход.
Подход первый – подпись картинки появляется слайдом вверх
Рассмотрим как это можно реализовать на HTML и CSS.
Сначала сделает врестку HTML.
Код
<div class="thumbnail">
<div class="img"><img src="http://zornet.ru/_fr/83/0033056.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 определяются размерами картинки. При наведении картинка смещается вверх, а подпись, которая до этого была абсолютно позиционирована ниже нижней границы, тоже выезжает вверх.
Всё это сглажено transition, чтобы переходы выглядели аккуратно и плавно.
Демонстрация
