Анимация подписей изображений с помощью переходов и преобразований CSS3

0 ∞

jQuery эффекты всплывающих подписей присутствуют в Интернете уже давно. Существует много библиотек JQuery, которые могут быть использованы для получения крутых и умопомрачительных эффектов анимированных и всплывающих подписей изображений.

Теперь те же самые крутые эффекты можно делать с помощью CSS3-переходов и свойств преобразования.

Сегодня я хочу показать вам, как можно создать интересные эффекты анимации при наведении с помощью анимации CSS3. Изображения, используемые в демо-версии, были созданы Рудольфом Мюсньи:

Демо

Ресурсы, необходимые выполнения заданий этой статьи:

  • Любое изображение;
  • Базовые знания CSS3-анимации;
  • Время и терпение.
Содержание

Разметка

С помощью HTML5 вы можете семантически обернуть изображения и подписи, используя элементы figure и figcaption. Для всех примеров, использовалась та же HTML-разметка. Оберните изображения и содержимое элементов figcaption в элемент figure:

<figure>
        <img alt="nerd girl" src="img/img3.jpg">

        <figcaption>
            <h3>I love this title!</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

            <p><a href="#">Read More</a></p>
        </figcaption>
    </figure>
CSS3: анимация против переходов

CSS для Демо 1

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

Обратите внимание, что свойство преобразования - rotate подключено, а также использовано свойство перехода стиля figcaption. Таким образом, задается красивая смена картинок и плавный переход. Для некоторых элементов, таких как H3 и теги абзацев, будет применено свойство transition-delay, поэтому эти элементы будут выводиться с определенной задержкой:

img {
	width: 100%;
}

figure {
	margin: 0;
	padding: 0;
	height: 300px;
	position: relative;
	display: block;
	cursor: pointer;
	overflow: hidden;
	border: 3px solid #fff;
}

figure:hover figcaption {
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	filter: alpha(opacity=100);
	opacity: 1;
	-webkit-transform: rotate(0);
	-moz-transform: rotate(0);
	-o-transform: rotate(0);
	-ms-transform: rotate(0);
	transform: rotate(0);
	top: 0;
}

figcaption {
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	filter: alpha(opacity=0);
	opacity: 0;
	position: absolute;
	height: 100%;
	width: 100%;
            	top: -100%;
	background: rgba(0,0,0,.5);
	color: #fff;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	-ms-transition: all .5s ease;
	transition: all .5s ease;
	-webkit-transition-delay: .5s;
	-moz-transition-delay: .5s;
	-o-transition-delay: .5s;
	-ms-transition-delay: .5s;
	transition-delay: .5s;
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	transform: rotate(360deg);
}

figcaption h3 {
	font-family: 'Open sans';
	font-weight: 400;
	color: #f3b204;
	padding: 10px 20px;
	margin-bottom: 0;
	position: relative;
	left: 100%;
	margin-top: 37px;
	font-size: 30px;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	-ms-transition: all .5s;
	transition: all .5s;
	-webkit-transition-delay: 1s;
	-moz-transition-delay: 1s;
	-o-transition-delay: 1s;
	-ms-transition-delay: 1s;
	transition-delay: 1s;
}

figcaption p {
	font-family: 'Open sans';
	padding: 10px 20px;
	margin-bottom: 0;
	margin-top: 20px;
	position: relative;
	left: 100%;
	font-size: 13px;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	-ms-transition: all .5s;
	transition: all .5s;
	-webkit-transition-delay: 1.3s;
	-moz-transition-delay: 1.3s;
	-o-transition-delay: 1.3s;
	-ms-transition-delay: 1.3s;
	transition-delay: 1.3s;
}

figure:hover h3,figure:hover p {
	left: 0;
}

figcaption a {
	color: #fff;
	border: 2px solid #fff;
	padding: 4px 10px;
	text-decoration: none;
}

figcaption a:hover {
	color: #4f5856;
	background: #fff;
}
Анимация в CSS3 при помощи ключевых кадров

CSS для Демо 2

Используя те же самые свойства для figure, figcaption и некоторых других элементов, удаляем свойство transform, и задаем вращение для элемента figcaption и свойство transition-delay для всех остальных элементов, кроме figcaption. В результате получаем плавное появление элемента:

img {
	width: 100%;
}
figure {
	margin: 0;
	padding: 0;
	height: 300px;
	position: relative;
	display: block;
	cursor: pointer;
	overflow: hidden;
    border: 3px solid #fff;
}

figure:hover figcaption {
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	filter: alpha(opacity=100);
	opacity: 1;
	top: 0;
}

figcaption {
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	filter: alpha(opacity=0);
	opacity: 0;
	position: absolute;
	height: 100%;
	width: 100%;
	background: rgba(0,0,0,.5);
	color: #fff;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	-ms-transition: all .5s ease;
	transition: all .5s ease;
	-webkit-transition-delay: .5s;
	-moz-transition-delay: .5s;
	-o-transition-delay: .5s;
	-ms-transition-delay: .5s;
	transition-delay: .5s;
}

figcaption h3 {
	font-family: 'Open sans';
	font-weight: 400;
	color: #f3b204;
	padding: 10px 20px;
	margin-bottom: 0;
	position: relative;
	righ: 100%;
	margin-top: 37px;
	font-size: 30px;
}

figcaption p {
	font-family: 'Open sans';
	padding: 10px 20px;
	margin-bottom: 0;
	margin-top: 20px;
	position: relative;
	left: 100%;
	font-size: 13px;
}

figure:hover h3,figure:hover p {
	left: 0;
}

figcaption a {
	color: #fff;
	border: 2px solid #fff;
	padding: 4px 10px;
	text-decoration: none;
}

figcaption a:hover {
	color: #4f5856;
	background: #fff;
}

CSS для Демо 3

Для Демо 3 создаем эффект увеличения изображения. Для элемента изображения используем свойство transform, и задаем шкалу для изменения размеров изображения при нажатии кнопки мыши. Мы также помещаем свойства transition-delay и transition в элемент изображения и в элемент figcaption:

img {
	width: 100%;
}

figure {
	margin: 0;
	padding: 0;
	height: 300px;
	position: relative;
	display: block;
	cursor: pointer;
	overflow: hidden;
	border: 3px solid #fff;
}

figure:hover figcaption {
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	filter: alpha(opacity=100);
	opacity: 1;
	top: 0;
}

figcaption {
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	filter: alpha(opacity=0);
	opacity: 0;
	position: absolute;
	height: 100%;
	width: 100%;
	background: rgba(0,0,0,.5);
	color: #fff;
	-webkit-transition: all .9s ease;
	-moz-transition: all .9s ease;
	-o-transition: all .9s ease;
	-ms-transition: all .9s ease;
	transition: all .9s ease;
	-webkit-transition-delay: .5s;
	-moz-transition-delay: .5s;
	-o-transition-delay: .5s;
	-ms-transition-delay: .5s;
	transition-delay: .5s;
}

figure img {
	-webkit-transition: all 1.5s;
	-moz-transition: all 1.5s;
	-o-transition: all 1.5s;
	-ms-transition: all 1.5s;
	transition: all 1.5s;
	-webkit-transition-delay: .5s;
	-moz-transition-delay: .5s;
	-o-transition-delay: .5s;
	-ms-transition-delay: .5s;
	transition-delay: .5s;
}

figure:hover img {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}

figcaption h3 {
	font-family: 'Open sans';
	font-weight: 400;
	color: #f3b204;
	padding: 10px 20px;
	margin-bottom: 0;
	position: relative;
	righ: 100%;
	margin-top: 37px;
	font-size: 30px;
}

figcaption p {
	font-family: 'Open sans';
	padding: 10px 20px;
	margin-bottom: 0;
	margin-top: 20px;
	position: relative;
	left: 100%;
	font-size: 13px;
}

figure:hover h3,figure:hover p {
	left: 0;
}

figcaption a {
	color: #fff;
	border: 2px solid #fff;
	padding: 4px 10px;
	text-decoration: none;
}

figcaption a:hover {
	color: #4f5856;
	background: #fff;
}

CSS для Демо 4

И, наконец, для этого Демо создаем крутой эффект слайдера. У нас будет практически тот же CSS-код, что и для третьего Демо. Только на этот раз мы задаем свойство позиционирования top для figcaption, только без вращения:

img {
	width: 100%;
}

figure {
	margin: 0;
	padding: 0;
	height: 300px;
	position: relative;
	display: block;
	cursor: pointer;
	overflow: hidden;
	border: 3px solid #fff;
}

figure:hover figcaption {
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	filter: alpha(opacity=100);
	opacity: 1;
	top: 0;
}

figcaption {
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	filter: alpha(opacity=0);
	opacity: 0;
	position: absolute;
	height: 100%;
	width: 100%;
	top: 250px;
	background: rgba(0,0,0,.5);
	color: #fff;
	-webkit-transition: all .9s ease;
	-moz-transition: all .9s ease;
	-o-transition: all .9s ease;
	-ms-transition: all .9s ease;
	transition: all .9s ease;
	-webkit-transition-delay: .5s;
	-moz-transition-delay: .5s;
	-o-transition-delay: .5s;
	-ms-transition-delay: .5s;
	transition-delay: .5s;
}

figcaption h3 {
	font-family: 'Open sans';
	font-weight: 400;
	color: #f3b204;
	padding: 10px 20px;
	margin-bottom: 0;
	position: relative;
	righ: 100%;
	margin-top: 37px;
	font-size: 30px;
	-webkit-transition: all .9s ease;
	-moz-transition: all .9s ease;
	-o-transition: all .9s ease;
	-ms-transition: all .9s ease;
	transition: all .9s ease;
}

figcaption p {
	font-family: 'Open sans';
	padding: 10px 20px;
	margin-bottom: 0;
	margin-top: 20px;
	position: relative;
	left: 100%;
	font-size: 13px;
	-webkit-transition: all .9s ease;
	-moz-transition: all .9s ease;
	-o-transition: all .9s ease;
	-ms-transition: all .9s ease;
	transition: all .9s ease;
}

figure:hover h3,figure:hover p {
	left: 0;
}

figcaption a {
	color: #fff;
	border: 2px solid #fff;
	padding: 4px 10px;
	text-decoration: none;
}

figcaption a:hover {
	color: #4f5856;
	background: #fff;
}

Заключение

Вот и все! Я надеюсь, вы получили удовольствие и научились чему-то из этой статьи. Надеюсь, также это вдохновит вас на создание восхитительных эффектов всплывающих подписей с помощью свойств CSS3 transform и transition-delay.

РедакцияПеревод статьи «Image Caption Animation with CSS3 Transform and Transitions»