Сучасний веб надає нам безліч методів, які можна використати для створення цікавих взаємодій іж елементами, але самі прості та елегантні - це, зазвичай, CSS методи, і, зокрема, нові можливості, які доступні нам з CSS3.
В старі часи, ми повинні були покладатися на JavaScript для такого роду ефектів, але завдяки постійно зростаючій підтримці CSS3 в різних браузерах, тепер можна налаштувати ефекти не використовуючи скрипти взагалі. Є, на жаль, браузери (IE9 і нижче), які не підтримують CSS3, тому необхідно мати резервний варіант для застарілих браузерів.
Сьогодні ми збираємося розглянути те, як ми можемо застосувати доволі гарні, але акуратні hover ефекти, щоб показати або приховати підписи зображень.
Якщо ви віддаєте перевагу слідувати разом з кодом, ви можете завантажити файли тут.
Демо 1
Перше демо - найпростіше: зображення буде відкривати підпис відлітаючи праворуч.
Розмітка
Для HTML нашого першого демо ми будемо використовувати неупорядкований список, а потім обертати заголовок і зображення всередині нього. Зверніть увагу, що ми також додамо клас demo-1 і effect всередину списку. Розмітка виглядатиме так:
<ul class="demo-1 effect">
<li>
<h2>This is a cool title!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
</li>
<li><img class="top" src="images/image1.jpg"></li>
</ul>
CSS
Для нашого CSS ми встановимо relative (відносне) позиціонування для класу demo-1, а потім налаштуємо ширину і висоту. Ми будемо приховувати елементи, які виходитимуть за область заданих розмірів. Додамо кілька основних стилів для h2 і p тегів, а також для тегу зображення. Для нашого класу ефекту ми задамо absolute (абсолютне) позиціонування і встановимо для нього margin:- 15px зверху і знизу. Ми використаємо CSS3 transition (переходи), щоб створити плавний ефект. Наш CSS:
.demo-1 {
position:relative;
width:300px;
height:200px;
overflow:hidden;
float:left;
margin-right:20px;
background-color:rgba(26,76,110,0.5)
}
.demo-1 p,.demo-1 h2 {
color:#fff;
padding:10px;
left:-20px;
top:20px;
position:relative
}
.demo-1 p {
font-family:'Lato';
font-size:12px;
line-height:18px;
margin:0
}
.demo-1 h2 {
font-family:'Lato';
font-size:20px;
line-height:24px;
margin:0;
}
.effect img {
position:absolute;
margin:-15px 0;
right:0;
top:0;
cursor:pointer;
-webkit-transition:top .4s ease-in-out,right .4s ease-in-out;
-moz-transition:top .4s ease-in-out,right .4s ease-in-out;
-o-transition:top .4s ease-in-out,right .4s ease-in-out;
transition:top .4s ease-in-out,right .4s ease-in-out
}
.effect img.top:hover {
top:-230px;
right:-330px;
padding-bottom:200px;
padding-left:300px
}
Демо 2
Наше друге демо - це сповзаюче вниз зображення. Це означає, що при наведенні курсора миші на зображення підпис відображатиметься зверху.
Розмітка
Для HTML нашого другого прикладу ми будемо використовувати дуже схожу на наше перше демо розмітку. Але на цей раз ми матимемо клас demo-2. Також додамо клас zero:
<ul class="demo-2 effect">
<li>
<h2 class="zero">This is a cool title!</h2>
<p class="zero">Lorem ipsum dolor sit amet.</p>
</li>
<li><img class="top" src="images/image1.jpg"></li>
</ul>
CSS
Наш CSS теж буде буде доволі схожим, за винятком того, що в цей раз ми будемо рухати наше зображення вниз встановивши значення bottom: -96px. Ми, як і минулого разу, будемо використовувати CSS3 переходи, щоб створити плавний ефект:
.demo-2 {
position:relative;
width:300px;
height:200px;
overflow:hidden;
float:left;
margin-right:20px;
background-color:rgba(26,76,110,0.5)
}
.demo-2 p,.demo-2 h2 {
color:#fff;
padding:10px;
left:-20px;
top:20px;
position:relative
}
.demo-2 p {
font-family:'Lato';
font-size:12px;
line-height:18px;
margin:0
}
.demo-2 h2 {
font-size:20px;
line-height:24px;
margin:0;
font-family:'Lato'
}
.effect img {
position:absolute;
left:0;
bottom:0;
cursor:pointer;
margin:-12px 0;
-webkit-transition:bottom .3s ease-in-out;
-moz-transition:bottom .3s ease-in-out;
-o-transition:bottom .3s ease-in-out;
transition:bottom .3s ease-in-out
}
.effect img.top:hover {
bottom:-96px;
padding-top:100px
}
h2.zero,p.zero {
margin:0;
padding:0
}
Демо 3
Для нашого останнього демо ми створимо фліп-ефект. Це означає, що при наведенні покажчика миші на зображення, воно буде обертатися навколо своєї осі і розкривати опис.
Розмітка
Для розмітки нашого останнього демо ми будемо використовувати іншу структуру. По-перше, ми будемо використовувати HTML5 елемент figure і тег figure caption нього. Для нашого неупорядкованого списку у нас буде клас demo-3:
<ul class="demo-3">
<li>
<figure>
<img src="images/image1.jpg">
<figcaption>
<h2>This is a cool title!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
</figcaption>
</figure>
</li>
</ul>
CSS
У CSS, ми задамо для нашого зображення відносне положення і потім приховаємо backface-visibility. Ми також скористаємось transform: rotateY(-180deg) для figcaption, а потім змінимо значення на 180``` градусів для hover зображення та надпису:
.demo-3 {
position:relative;
width:300px;
height:200px;
overflow:hidden;
float:left;
margin-right:20px
}
.demo-3 figure {
margin:0;
padding:0;
position:relative;
cursor:pointer;
margin-left:-50px
}
.demo-3 figure img {
display:block;
position:relative;
z-index:10;
margin:-15px 0
}
.demo-3 figure figcaption {
display:block;
position:absolute;
z-index:5;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box
}
.demo-3 figure h2 {
font-family:'Lato';
color:#fff;
font-size:20px;
text-align:left
}
.demo-3 figure p {
display:block;
font-family:'Lato';
font-size:12px;
line-height:18px;
margin:0;
color:#fff;
text-align:left
}
.demo-3 figure figcaption {
top:0;
left:0;
width:100%;
height:100%;
padding:29px 44px;
background-color:rgba(26,76,110,0.5);
text-align:center;
backface-visibility:hidden;
-webkit-transform:rotateY(-180deg);
-moz-transform:rotateY(-180deg);
transform:rotateY(-180deg);
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s
}
.demo-3 figure img {
backface-visibility:hidden;
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s
}
.demo-3 figure:hover img,figure.hover img {
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
transform:rotateY(180deg)
}
.demo-3 figure:hover figcaption,figure.hover figcaption {
-webkit-transform:rotateY(0);
-moz-transform:rotateY(0);
transform:rotateY(0)
}
Ще немає коментарів