Створіть сучасні hover ефекти на CSS3

16

Від автора: властивість CSS transition дає нам можливість анімувати зміни значення властивості CSS. Це можна використовувати для поступового гладкого зміни значення, а з допомогою затримки імітувати перехід елементів. Властивість CSS transform дозволяє перетворити елементи в дво — або тривимірному просторі. У цьому підручнику ми застосуємо 2D-перетворення.

Крок 1 – створення базового HTML

Спочатку створюємо просту основу HTML.

Створіть сучасні hover ефекти на CSS3

Так ми побудували розмітку свого блоку. Блок містить зображення і div hover_info, де буде та інформація, яку треба відобразити при проведенні мишею.

Крок 2 – створення базового CSS

Далі ми створюємо CSS, призначаємо основні стилі і створюємо перший перехід. Для зручності цей підручник написаний без урахування префіксів.

.block_holder {
padding: 7px;
background: #f6f6f6;
width: 350px;
height: 250px;
box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.15);
float: left;
margin: 15px;
}
.block {
width: 350px;
height: 250px;
position: relative;
overflow: hidden;
}
.hover_info {
width: 350px;
height: 250px;
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
width: 100%;
height: 100%;
position: absolute;
left: -86%;
top: -19%;
transition: all 200ms linear;
transform: rotate(90deg);
}

Тепер, після додавання CSS наш блок містить зображення і div під назвою hover_info. В цей CSS ми трохи додали основних стилів для block_holder і блоку .block . Додали до div у hover_info фон з непрозорістю 80%, абсолютне позиціонування для того, щоб розмістити його межами блоку, і застосували до .block overflow hidden, щоб div hover_info не з’являвся.

Потім використовувалося властивість CSS transition, яке дає можливість визначити елементи, до яких потрібно застосувати перехід. Ми скористалися all, тому перехід застосовується до всіх елементів, де змінено значення. Встановили тривалість 200мс – так довго триватиме перехід для всіх змінених елементів. Нарешті, застосували linear в якості функції розрахунку часу, що означає: наші переходи будуть від початку і до кінця мати постійну швидкість. Потім ми використовуємо transform для обертання div а на 90 градусів.

Остаточний фрагмент коду на цьому етапі потрібен для установки CSS, що застосовується при проведенні мишею над блоком.

.block:hover .hover_info {
top: 0;
left: 0;
transform: rotate(0deg);
}

У цьому CSS при проведенні мишею над блоком ми змінюємо властивості top, left і transform div а hover_info . Так анимируется div, що накладається поверх зображення. При проведенні мишею div повинен повернутися на місце, як видно на цьому демо-прикладі.

Крок 3 – додавання остаточного HTML

Тепер, коли при проведенні мишею є основа з початковим переходом, ми додамо в div hover_info вміст у вигляді заголовка, абзацу та посилання.

Створіть сучасні hover ефекти на CSS3

Article Title

Lorem ipsum dolor. Aenean scelerisque odio ut dui feugiat commodo. Nulla blandit erat vel nisi consectetur ac pharetra augue consectetur.

Read more

Крок 4 – додавання остаточного CSS

Коли HTML готовий, додамо до всіх елементів стилі.

.hover_info h1 {
font-size: 2em;
padding: 10px 20px;
background: rgba(207, 138, 5, 0.7);
color: #E7E7E7;
position: absolute;
top: 25px;
left: -100%;
transition: left 200ms linear;
}
.hover_info:hover h1 {
left: 0;
transition-delay: 200ms;
}

Ми розмістили H1 в 25px від верху і спочатку в 100% зліва для того, щоб спочатку він був прихований. При проведенні мишею змінюємо ліву позицію на 0 з тим, щоб H1 вислизнув ліворуч. Застосовуємо при проведенні мишею властивість transition-delay з установкою на 200мс, щоб щось відбувалося після початкового переходу.

Ми застосували це до класу hover, а не початкового класу, щоб властивість застосовувалося, коли користувач вперше проводить мишею над областю. Коли миша забирається з області, затримка не застосовується і перехід відбувається миттєво.

.hover_info p {
font-size: 1.5 em;
line-height: 1.4;
color: #fff;
position: absolute;
top: 85px;
left: 10%;
width: 80%;
text-align: center;
opacity: 0;
transition: opacity 200ms linear;
}
.hover_info:hover p {
opacity: 1;
transition-delay: 600ms;
}

Ми помістили абзац 85px від верху і 10% зліва з шириною 80%. Так створиться враження того, що абзац знаходиться в центрі блоку. Ми встановили непрозорість на 0, тому він спочатку не з’являється, і встановили перехід transition до непрозорості opacity зі швидкістю 200мс за допомогою функції лінійного розрахунку часу.

При проведенні мишею ми потім встановили непрозорість на 1, що змушує з’явитися текст. Встановили затримку в 600мс, що означає перехід станеться після початкового обертання і вислизання заголовка.

.hover_info a {
font-size: 1.5 em;
padding: 10px 20px;
background: rgba(207, 138, 5, 0.7);
color: #E7E7E7;
position: absolute;
bottom: 25px;
right: -100%;
text-decoration: none;
}
.hover_info:hover a {
right: 0;
transition: right 200ms linear 700ms, color, background 200ms linear;
}
.hover_info a:hover {
background: rgba(207, 138, 5, 1.0);
color: #F7F7F7;
}

Ми призначили цього тегу ті ж стилі, що і тегу заголовка, за винятком того, що на цей раз він знаходиться внизу праворуч і знову спочатку розташований праворуч. При проведенні мишею ми потім робимо перехід праворуч зі швидкістю 200мс при лінійній швидкості, на цей раз з затримкою в 700мс. Ця затримка означає, що перехід почнеться посеред переходу абзацу. Потім робимо фінальну пару переходів кольору і фону з тією ж швидкістю, але вже без затримки. Це буде працювати при проведенні мишею над тегом – той змінить фон і колір тексту.

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