• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Анимация изображение с подписью на CSS (Красивый вид эффекта с изображением при наведении)
Анимация изображение с подписью на CSS
Kosten
Дата: Понедельник, 2019-09-23, 03:03 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25011
Награды: 57


Сегодня мы начинаем со статей о том, как делается анимация картинки с подписью 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, чтобы переходы выглядели аккуратно и плавно.

Демонстрация
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Анимация изображение с подписью на CSS (Красивый вид эффекта с изображением при наведении)
  • Страница 1 из 1
  • 1
Поиск: