Візуальний слайд-ефект для підписів зображень на HTML5 і CSS3

32

Раніше для створення різних ефектів обов’язково потрібно підключення javascript і додаткових файлів зображень, з виходом на арену веб-розробки найпотужніших інструментів CSS3 і HTML5 всі реалізується набагато простіше.
У сьогоднішньому прикладі продемонструю html-розмітку і готовий набір правил css, для створення одного з безлічі візуальних ефектів виведення підписів до зображень, ефекту у вигляді вислизає блоку з певним змістом. У заголовку назвав його умовно «слайд-ефектом», тому як «выскальзывающие», або ще хлеще «висуваються», «виїжджають» підписи, більше підходять для логопедичних тренувань. Неважливо, назвіть «шторками», до речі дуже поширена назва ефектів при наведенні на картинки.

І так, дивимося приклад, а потім трохи пояснень і розбір що до чого і куди…

Підтримка браузерами

Ефект заснований на трансформаціях і переходи CSS3 застосованих щодо до тегу HTM5 . Стовідсоткове функціонування в наступних браузерах: Internet Explorer 10+, Firefox 6+, Chrome 13+, Opera 11+ і Safari 3.2+.
Виходячи з цього, випливає простий висновок: широко і повсюдно використовувати ефекти засновані тільки на CSS3, поки передчасно, звичайно якщо вам не все одно на армію користувачів наполегливо засіли на XP з її IE8. Хоча…

HTML-Розмітка

Як я писав вище, для групування зображення і підпис до нього використовуємо теги і з арсеналу платформи HTML5

<figure>
<img src="images/dbmast2.jpg">
<figcaption>
<h2>Заголовок</h2>
<p>
Приклад створення візуального эффкта що вислизає підписи до зображень з застосуванням тільки CSS3.
</p>
<p>
Тут можете розмістити наприклад, короткий опис товару, анонс статті або подання робіт портфоліо.
</p>
<p>
Все що завгодно, в залежності від розміру мініатюри і вашої невгамовної фантазії.
</p>
<a href="#">Посилання</a>
</figcaption>
</figure>

Заголовок

Приклад створення візуального эффкта що вислизає підписи до зображень з застосуванням тільки CSS3.

Тут можете розмістити наприклад, короткий опис товару, анонс статті або подання робіт портфоліо.

Все що завгодно, в залежності від розміру мініатюри і вашої невгамовної фантазії.

Посилання

Зображення поміщаємо в розділ тега , відразу після картинки відкриваємо тег , розміщуємо потрібний вам зміст(заголовок, опис, посилання) і закриваємо теги і
Всі! Залишається найцікавіше, це сформувати зовнішній вигляд і поведінка всіх елементів використовуючи магію властивостей CSS3.

Стилі CSS

Почнемо з визначення стилів для тега , зазначимо все необхідне, ширину width:, висоту height:, відступи margin:, стиль курсору, розмір і накреслення шрифту, позиціонування position:, a так само вкажемо властивість overflow: hidden, для того щоб приховати всі елементи, вкладені в блок і виступають за його межі.

figure {
width: 350px;
height: 240px;
margin: 10px;
overflow: hidden;
position: relative;
text-align: left;
box-shadow: 1px 1px 3px #ccc;
border: 4px solid #fff;
cursor: default;
font:normal 11px/15px Helvetica, Arial, sans-serif;
}

figure {
width: 350px;
height: 240px;
margin: 10px;
overflow: hidden;
position: relative;
text-align: left;
box-shadow: 1px 1px 3px #ccc;
border: 4px solid #fff;
cursor: default;
font:normal 11px/15px Helvetica, Arial, sans-serif;
}

У прикладі додав рамку і трохи тіні box-shadow:, надавши тим самим трішки виразності основного елементу з картинкою.
Далі сформуємо блок підпису до зображення в теге і визначимо йому властивості transition: і transform:, а так само сховаємо його до пори до часу за допомогою властивості visibility:hidden;.

figure figcaption {
width: 350px;
height: 240px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
background: #eee;

-moz-transform: translateX(-350px);
-o-transform: translateX(-350px);
-webkit-transform: translateX(-350px);
transform: translateX(-350px);
visibility:hidden;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-ms-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}

figure figcaption {
width: 350px;
height: 240px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
background: #eee;-moz-transform: translateX(-350px);
-o-transform: translateX(-350px);
-webkit-transform: translateX(-350px);
transform: translateX(-350px);
visibility:hidden;-webkit-transition: all 0.4 s ease-out;
-moz-transition: all 0.4 s ease-out;
-ms-transition: all 0.4 s ease-out;
-o-transition: all 0.4 s ease-out;
transition: all 0.4 s ease-out;
}

Далі нам необхідно визначити позиціонування position: і ефект переходу transition: для картинки, і параграфа p з вмістом, а так само призначити стилі заголовку h2, і посилання присутньої в тілі підпису.

figure img {
display: block;
position: relative;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-ms-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
figure h2 {
text-transform: uppercase;
color: #333;
position: relative;
font-size: 17px;
letter-spacing: 1px;
margin: 20px 0 0 20px;
}
figure p {
font-size: 12px;
line-height: 17px;
position: relative;
color: #333;
margin: 10px 0 10px 20px;
width:310px;
-webkit-transition: all 0.4 ease-out;
-moz-transition: all 0.4 ease-out;
-ms-transition: all 0.4 ease-out;
-o-transition: all 0.4 ease-out;
transition: all 0.4 ease-out;
}
figure a {
text-decoration: none;
color: #359CC6;
margin: 10px 0 10px 20px;
}
figure a:hover {
color: #E88F00;
border-bottom: 1px dotted #9F1D35;
}

figure img {
display: block;
position: relative;
-webkit-transition: all 0.4 s ease-out;
-moz-transition: all 0.4 s ease-out;
-ms-transition: all 0.4 s ease-out;
-o-transition: all 0.4 s ease-out;
transition: all 0.4 s ease-out;
}figure h2 {
text-transform: uppercase;
color: #333;
position: relative;
font-size: 17px;
letter-spacing: 1px;
margin: 20px 0 0 20px;
}figure p {
font-size: 12px;
line-height: 17px;
position: relative;
color: #333;
margin: 10px 0 10px 20px;
width:310px;
-webkit-transition: all 0.4 ease-out;
-moz-transition: all 0.4 ease-out;
-ms-transition: all 0.4 ease-out;
-o-transition: all 0.4 ease-out;
transition: all 0.4 ease-out;
}figure a {
text-decoration: none;
color: #359CC6;
margin: 10px 0 10px 20px;
}figure a:hover {
color: #E88F00;
border-bottom: 1px dotted #9F1D35;
}

Тепер залишилося тільки завести наш ефект з допомогою псевдокласу :hover для елементів розташованих в тезі figure:

figure:hover figcaption {
-moz-transform: translateX(0);
-o-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
visibility:visible;
}
figure:hover img {
-moz-transform: translateX(350px);
-o-transform: translateX(350px);
-webkit-transform: translateX(350px);
transform: translateX(350px);
}
figure:hover p{
opacity: 1;
}

figure:hover figcaption {
-moz-transform: translateX(0);
-o-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
visibility:visible;
}figure:hover img {
-moz-transform: translateX(350px);
-o-transform: translateX(350px);
-webkit-transform: translateX(350px);
transform: translateX(350px);
}figure:hover p{
opacity: 1;
}

Додаток

В одному з коментарів до вже опублікованої статті мене запитали: «як зробити щоб figcaption був не текстовим… а картинкою?» Тобто, зробити так щоб одна картинка змінювалася іншою при наведенні.

Все дуже просто, необхідно в CSS додати селектор з ім’ям img до розділів figure figcaption і figure:hover figcaption, так щоб вийшло
figure figcaption img і figure:hover figcaption img відповідно. Щоб не дублювати однакові властивості, слід об’єднати їх в одну групу, прописавши назви селекторів через кому:

figure figcaption,
figure figcaption img{
....тут всі необхідні властивості
}
figure:hover figcaption,
figure:hover figcaption img{
...тут всі необхідні властивості
}

figure figcaption,
figure figcaption img{
….тут всі необхідні властивості
}figure:hover figcaption,
figure:hover figcaption img{
…тут всі необхідні властивості
}

Загалом, щоб вам особливо не морочитися, доповнив код CSS, додавши можливість зміни картинки на іншу при наведенні за замовчуванням. Якщо вам знадобиться використовувати таку можливість досить figcaption замість текстового змісту помістити потрібну вам картинку:

<figure>
<img src="адрес-вашей-картинки-1.јрд">
<figcaption>
<img src="адрес-вашей-картинки-2.јрд">
</figcaption>
</figure>


На цьому все! Бажаючі можуть подивитися повно-масштабне демо і там же поекспериментувати з кодом, благо онлайн-редактор дозволяє це робити:

Демо

З повагою, Андрій