Ефекти збільшення і повороту тексту, що зявляється поверх зображення, на чистому CSS3

22

Від автора: Анімація, продемонстрована в даній статті, виконана на чистому CSS3. Вона складається з одного простого напівпрозорого шару поверх зображення і з’являється тексту, який повертається і збільшується при появі.

Наведені CSS стилі можуть бути використані для поліпшення окремих моментів веб-дизайну, наприклад, створення «прев’ю» для галерей або статей.

HTML-розмітка ще ніколи не була настільки простою. Кожне зображення є елементом img, який розташований всередині елемента a (проста HTML посилання, у якої є атрибут title для з’являється під час анімації тексту). Ось приблизний HTML для одного з таких зображень:

Ефекти збільшення і повороту тексту, що зявляється поверх зображення, на чистому CSS3

Анімація зображення і з’являється тексту складається з двох частин:

Темна обкладинка. Це шар, який розташовується поверх зображення і займає весь доступний простір, відведений під зображення. Це означає, що у даного шару будуть такі ж параметри ширини і висоти, як і зображення, незалежно від розмірів самого зображення. Цей шар додається за допомогою CSS псевдо-елемента before. Він є напівпрозорим (CSS властивість opacity). В якості фону задається чорний колір. Цей шар відображається, коли користувач наводить курсор миші на зображення.

З’являється текст. Це шар, який розташовується поверх шару з «темною обкладинкою». Цей шар додається за допомогою CSS псевдо-елемента after. Це прозорий шар, який містить тільки текст, отриманий із значення атрибута title біля елемента a. Цей шар пропонується по центру (по вертикалі і горизонталі). Його анімація включає два ефекти: збільшення та повертання. Дані ефекти досягаються за допомогою двох CSS властивості: transform і transition. CSS властивість transform використовує функції scale і rotate, щоб збільшувати і повертати даний шар. Вся анімація починає виконуватися, коли користувач наводить курсор миші на зображення.

Ось CSS стилі, які генерують анімаційний ефект збільшення:

a {
text-align: center;
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;
}
after a: {
font-family: Tahoma;
color: white;
content: attr(title);
display: block;
font-size: 30px;
font-weight: bold;
opacity: 0;
padding: 0 3%;
position: absolute;
text-transform: uppercase;
top: 50%;
-webkit-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: scale(0) translateY(-50%);
-ms-transform: scale(0) translateY(-50%);
transform: scale(0) translateY(-50%);
width: 94%;
z-index: 3;
}
a img {
border: none;
display: block;
z-index: 1;
}
after a: {
-webkit-transition: all 350ms ease-in-out;
-moz-transition: all 350ms ease-in-out;
-o-transition: all 350ms ease-in-out;
transition: all 350ms ease-in-out;
}
a:hover:before {
opacity: 0.6;
}
a:hover:after {
opacity: 1;
-webkit-transform: scale(1) translateY(-50%);
-ms-transform: scale(1) translateY(-50%);
transform: scale(1) translateY(-50%);
}

Демо-приклад

А ось додаткові стилі, які дозволять повертати текст під час анімації:

after a: {
-webkit-transform: scale(0) rotate(-360deg) translateY(-50%);
-ms-transform: scale(0) rotate(-360deg) translateY(-50%);
transform: scale(0) rotate(-360deg) translateY(-50%);
}
a:hover:after {
-webkit-transform: scale(1) rotate(0deg) translateY(-50%);
-ms-transform: scale(1) rotate(0deg) translateY(-50%);
transform: scale(1) rotate(0deg) translateY(-50%);
}

Демо-приклад