Иногда в профессиональной разработке сайта необходимо делать описание для фотографий, которое пояаляется снизу или сбоку при наведении курсора мыши.
Всплывающее описание красиво выглядит и не занимает место в фотогалереи, работает по CSS hover-эффекту для изображений
Рабочий пример всплывающего описания для фото на CSS
[html]<style> figure.pict * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
figure.pict {
position: relative;
max-width: 100%;
display: inline-block;
border: 6px solid #00bff3;
background: #00bff3;
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.pict img {
transition: all 300ms;
position: relative;
top: 0;
left: 0;
}
figure.pict:hover img {
transition: all 700ms;
transform: scale(1.1);
}
figure.pict figcaption {
position: absolute;
background: #00bff3;
transition: transform 300ms;
padding: 12px;
}
figure.pict: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 #00bff3;
}
figure.info-top:hover img {
top: 40px;
}
figure.info-top figcaption {
top: 0;
transform: translateY(-100%);
border-bottom: 6px solid #00bff3;
}
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 #00bff3;
}
figure.info-right:hover img {
left: -90px;
}
figure.info-right figcaption {
right: 0;
top: 0;
transform: translateX(180px);
border-left: 6px solid #00bff3;
}
figure.info-left figcaption,
figure.info-right figcaption {
width: 180px;
height: 100%;
}
figure.pict figcaption .info span {
font-size: 13px;
font-family: Verdana, sans-serif;
display: block;
}
figure.pict figcaption .info h3 {
font-size: 18px;
display: inline-block;
font-weight: normal;
font-family: 'Roboto Condensed', sans-serif;
margin-bottom: 4px;
padding-bottom: 4px;
border-bottom: 1px solid #337AB7;
} </style>
<figure class="pict info-bottom">
<img src="https://xn----7sbbaqhlkm9ah9aiq.net/upload2/hoverpic-1.jpg" alt="" />
<figcaption>
<span class="info">
<h3>Заголовок фотографии</h3>
<span>Текст описания</span>
</span>
</figcaption>
</figure>
[/html]
HTML:
<figure class="pict info-bottom">
<img src="https://xn----7sbbaqhlkm9ah9aiq.net/upload2/hoverpic-1.jpg" alt="" />
<figcaption>
<span class="info">
<h3>Заголовок фотографии</h3>
<span>Текст описания</span>
</span>
</figcaption>
</figure>
CSS:
figure.pict * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
figure.pict {
position: relative;
max-width: 100%;
display: inline-block;
border: 6px solid #00bff3;
background: #00bff3;
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.pict img {
transition: all 300ms;
position: relative;
top: 0;
left: 0;
}
figure.pict:hover img {
transition: all 700ms;
transform: scale(1.1);
}
figure.pict figcaption {
position: absolute;
background: #00bff3;
transition: transform 300ms;
padding: 12px;
}
figure.pict: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 #00bff3;
}
figure.info-top:hover img {
top: 40px;
}
figure.info-top figcaption {
top: 0;
transform: translateY(-100%);
border-bottom: 6px solid #00bff3;
}
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 #00bff3;
}
figure.info-right:hover img {
left: -90px;
}
figure.info-right figcaption {
right: 0;
top: 0;
transform: translateX(180px);
border-left: 6px solid #00bff3;
}
figure.info-left figcaption,
figure.info-right figcaption {
width: 180px;
height: 100%;
}
figure.pict figcaption .info span {
font-size: 13px;
font-family: Verdana, sans-serif;
display: block;
}
figure.pict figcaption .info h3 {
font-size: 18px;
display: inline-block;
font-weight: normal;
font-family: 'Roboto Condensed', sans-serif;
margin-bottom: 4px;
padding-bottom: 4px;
border-bottom: 1px solid #337AB7;
}
- Подпись автора