Иногда смотря на изображение, думаешь, что здесь не хватает название, но как поместить, вот как раз разберемся, где применим красивый эффект при наведении курсора. Изначально идет картинка, но после того, как наводим клик, то в самом низу снимка появляется панель в прозрачной форме. В нашем случай идет светло прозрачная гамма, и вот на ней написано название.
Только убираем курсор, так автоматически исчезает блок с названием, все сделано аккуратно и познавательно. Как можно заметить, что не сложно подключить основную структуру, которая может пригодится на многих каталогах, где присутствует множество картинок.
Как пример по умолчанию:
Здесь при наведении:
HTML
Код
<figure>
<img src="http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/0fb712e14c8d43cba226fa52c3a6e6de.png" alt="Здесь идет название картинки">
<figcaption>
<h3>ZorNet.Ru — интернет ресурс для вебмастеров</h3>
</figcaption>
</figure>
CSS
Код
figure {
width: 495px;
position: relative;
overflow: hidden;
}
figure img {
display: block;
width: 100%;
transition: 600ms;
}
figcaption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: rgba(208, 203, 203, 0.8);
padding: 18px;
text-align: center;
opacity: 0;
transform: translateY(100%);
transition: 600ms;
cursor: pointer;
}
figure:hover figcaption {
opacity: 1;
transform: translateY(0);
}
figure:hover img {
transform: scale(1.5);
}
Теперь остается поставить на те картинки на сайте, где бы отлично смотрелся этот эффект, что идет по умолчанию познавательным, так как представляет ключевое слово в плане название.
Демонстрация
