Выдвигающееся описание для фотографий, которое выдвигается сбоку при наведении курсора мыши
Обычно в галереях подписывают не фотографии, а только альбомы, и те не всегда. Для таких вариантов можно использовать оформление из темы "Hover-эффекты для изображений". Но если требуется подписать именно каждую фотографию, то смотрим эту заметку
ДЕМО - ПРИМЕР:

info-bottom
вывод описания снизу
info-top
вывод описания сверху
info-left
вывод описания слева
info-right
вывод описания справаHTML КОД:
<figure class="card info-bottom">
<img src="/demo/640/TimHill-1.jpg" alt="" />
<figcaption>
<span class="info">
<h3>Заголовок фото</h3>
<span>Описание фото</span>
</span>
</figcaption>
</figure>
Где: info-bottom - вывод описания снизу.
Другие варианты: info-top - вывод описания сверху, info-left - слева, info-right - справа.
CSS КОД:
figure.card * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
figure.card {
position: relative;
max-width: 100%;
display: inline-block;
border: 6px solid #BFE2FF;
background: #BFE2FF;
box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
overflow: hidden;
margin: 15px 0;
font-size: 0;
}
figure.card img {
transition: all 300ms;
position: relative;
top: 0;
left: 0;
}
figure.card:hover img {
transition: all 700ms;
transform: scale(1.1);
}
figure.card figcaption {
position: absolute;
background: #BFE2FF;
transition: transform 300ms;
padding: 12px;
}
figure.card:hover figcaption {
transform: translateY(0);
}
figure.info-bottom:hover img {
top: -40px;
}
figure.info-bottom figcaption {
bottom: 0;
transform: translateY(100%);
border-top: 6px solid #BFE2FF;
}
figure.info-top:hover img {
top: 40px;
}
figure.info-top figcaption {
top: 0;
transform: translateY(-100%);
border-bottom: 6px solid #BFE2FF;
}
figure.info-bottom figcaption,
figure.info-top figcaption {
width: 100%;
}
figure.info-left:hover img {
left: 90px;
}
figure.info-left figcaption {
left: 0;
top: 0;
transform: translateX(-180px);
border-right: 6px solid #BFE2FF;
}
figure.info-right:hover img {
left: -90px;
}
figure.info-right figcaption {
right: 0;
top: 0;
transform: translateX(180px);
border-left: 6px solid #BFE2FF;
}
figure.info-left figcaption,
figure.info-right figcaption {
width: 180px;
height: 100%;
}
figure.card figcaption .info span {
font-size: 13px;
font-family: Verdana, sans-serif;
display: block;
}
figure.card figcaption .info h3 {
font-size: 18px;
display: inline-block;
font-weight: normal;
font-family: 'Roboto', sans-serif;
margin-bottom: 4px;
padding-bottom: 4px;
border-bottom: 1px solid #337AB7;
}
0 Комментарии