Спливаюча підпис до зображення при наведенні з допомогою CSS3

32

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

Сьогодні хочу продемонструвати ще один, напевно один з найпростіших прикладів, реалізації спливаючій підпис до зображення при наведенні, виконаний виключно засобами CSS3, без підключення javascript.

Подпись к картинке при наведении

Подивитися результат, а також поекспериментувати з параметрами, ви можете безпосередньо в онлайн-редакторі, поданому нижче:

HTML-Розмітка

<div class="thumbs">
<img src="images/image02.jpg"/>
<div class="caption">
<span class="title">Заголовок картинки</span>
<span class="info">Короткий опис або анонс запису</span>
</div>
</div>

Заголовок картинки
Короткий опис або анонс запису

Стилі CSS

.thumbs {
width: 100%;
max-width: 450px; /* опціонально */
margin: 10px;
opacity: .99;
overflow: hidden;
position: relative;
border-radius: 3px;
cursor: pointer;
-webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
-moz-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
.thumbs:before {
content: ";
background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
width: 100%;
height: 50%;
opacity: 0;
position: absolute;
top: 100%;
left: 0;
z-index: 2;
-webkit-transition-property: top, opacity;
transition-property: top, opacity;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.thumbs img {
display: block;
width: 100%; /* ширина картинки */
height: auto; /* висота картинки */
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.thumbs .caption {
width: 100%;
padding: 20px;
color: #fff;
 position: absolute;
bottom: 0;
left: 0;
z-index: 3;
text-align: center;
}
.thumbs .caption span {
display: block;
opacity: 0;
position: relative;
top: 100px;
-webkit-transition-property: top, opacity;
transition-property: top, opacity;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.thumbs .caption .title {
line-height: 1;
font-weight: normal;
font-size: 18px;
}
.thumbs .caption .info {
line-height: 1.2;
margin-top: 5px;
font-size: 12px;
}
.thumbs:focus:before,
.thumbs:focus span, .thumbs:hover:before,
.thumbs:hover span {
opacity: 1;
}
.thumbs:focus:before, .thumbs:hover:before {
top: 50%;
}
.thumbs:focus span, .thumbs:hover span {
top: 0;
}
.thumbs:focus .title, .thumbs:hover .title {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.thumbs:focus .info, .thumbs:hover .info {
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}

.thumbs {
width: 100%;
max-width: 450px; /* опціонально */
margin: 10px;
opacity: .99;
overflow: hidden;
position: relative;
border-radius: 3px;
cursor: pointer;
-webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
-moz-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
.thumbs:before {
content: “;
background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
width: 100%;
height: 50%;
opacity: 0;
position: absolute;
top: 100%;
left: 0;
z-index: 2;
-webkit-transition-property: top, opacity;
transition-property: top, opacity;
-webkit-transition-duration: 0.3 s;
transition-duration: 0.3 s;
}
.thumbs img {
display: block;
width: 100%; /* ширина картинки */
height: auto; /* висота картинки */
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.thumbs .caption {
width: 100%;
padding: 20px;
color: #fff;
position: absolute;
bottom: 0;
left: 0;
z-index: 3;
text-align: center;
}
.thumbs .caption span {
display: block;
opacity: 0;
position: relative;
top: 100px;
-webkit-transition-property: top, opacity;
transition-property: top, opacity;
-webkit-transition-duration: 0.3 s;
transition-duration: 0.3 s;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.thumbs .caption .title {
line-height: 1;
font-weight: normal;
font-size: 18px;
}
.thumbs .caption .info {
line-height: 1.2;
margin-top: 5px;
font-size: 12px;
}
.thumbs:focus:before,
.thumbs:focus span, .thumbs:hover:before,
.thumbs:hover span {
opacity: 1;
}
.thumbs:focus:before, .thumbs:hover:before {
top: 50%;
}
.thumbs:focus span, .thumbs:hover span {
top: 0;
}
.thumbs:focus .title -.thumbs:hover .title {
-webkit-transition-delay: 0.15 s;
transition-delay: 0.15 s;
}
.thumbs:focus .info, .thumbs:hover .info {
-webkit-transition-delay: 0.25 s;
transition-delay: 0.25 s;
}

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

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

Буду вдячний, якщо поділитеся посиланням на запис в своїх соціальних мережах: