15.07.14, 16:43
0 комментарий
  Уроки

Анимация увеличения изображения и динамическое отображение заголовка на чистом CSS3

Сегодня заметно увеличилось количество веб-сайтов, на которых новости, публикации или посты отображаются в виде обособленных блоков с изображением и заголовком, расположенных в несколько колонок. Сегодня мы хотим представить вам простой пример анимации для основного изображения, которая сделает блоки статей на вашем сайте привлекательнее.


Давайте начнем с HTML-структуры. Каждое изображение – это ссылка с этим изображение внутри. У link есть атрибут title, и его значение используется в анимации с появлением этого заголовка.

Предлагаем вам HTML-код ссылки с изображением:

<a href="#" title="HTML is a language for web page markup."><img src="nature.jpg" alt=""></a>


Анимация изображения состоит из 3 частей:

1. Эффект зума изображения. Этот эффект достигается за счет изменения CSS-свойства вкупе с методом scale.

2. Затемнение изображение. На самом деле, это слой, который расположен поверх изображения, и имеет такой же размер, что и изображение. Этот слой добавляется посредством псевдо-элемента after в CSS-коде. Он полупрозрачный (CSS-свойство opacity) и имеет черный цвет фона.

3. Появляющийся заголовок. Это также слой, который расположен поверх изображения и слоя затемнения. Этот слой добавляется посредством псевдо-элемента after в CSS-коде, он имеет полупрозрачный фон (RGBA), выставленный на белый цвет, а также оформлен текстом, который был взят из атрибута title в ссылке.

Все три части этой удивительной анимации запускаются тогда, когда пользователь наводит курсор мыши на изображение.

Предлагаем вашему вниманию CSS-стили:

a {
  display: inline-block;
  overflow: hidden;
  position: relative;
  text-decoration: none;
}

a:before {
  display: block;
  background-color: rgb(0, 0, 0);
  content: "";
  height: 100%;
  opacity: 0;
  position: absolute;
  width: 100%;
  z-index: 2;
}

a:after {
  display: block;
  background-color: rgba(255, 255, 255, 0.8);
  color: black;
  content: attr(title);
  left: -100%;
  padding: 2% 3%;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  top: 5%;
  width: 94%;
  z-index: 3;
}

a img {
  border: none;
  display: block;
  z-index: 1;
}

a:before,
a:after,
a img {
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}

a:hover img {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
}

a:hover:before {
  opacity: 0.3;
}

a:hover:after {
  left: 0;
}


Напишите своё мнение