Warning: file_get_contents(): php_network_getaddresses: getaddrinfo failed: Name or service not known in /var/www/htmler.ru/wp-content/plugins/dodel-dance-booking/inc/api.php on line 22

Warning: file_get_contents(https://.dancecloud.at/index.php?c=PublicCustomers&a=JSON&what=courses): failed to open stream: php_network_getaddresses: getaddrinfo failed: Name or service not known in /var/www/htmler.ru/wp-content/plugins/dodel-dance-booking/inc/api.php on line 22

Warning: Invalid argument supplied for foreach() in /var/www/htmler.ru/wp-content/plugins/dodel-dance-booking/inc/meta.php on line 17
Анимация картинки с подписью CSS. Часть 1 - HTMLer.ru
CSS

Анимация картинки с подписью CSS. Часть 1

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

Посмотрите, как срабатывает такая анимация при наведеении на картинку (код полностью как приведен выше).


Также рекомендуем: