Главная > Анимация > Анимированный эффект увеличения изображения и динамическое отображение заголовка при помощи чистого CSS3

Анимированный эффект увеличения изображения и динамическое отображение заголовка при помощи чистого CSS3


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

Анимированный эффект увеличения изображения и динамическое отображение заголовка при помощи чистого 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;
}

* Демо
Вернуться назад