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

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



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

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

* Демо
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 4446   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
2728293031