Сделайте так, чтобы изображения размещались в виде «встроенного блока» с надписями внизу.
Я разрабатываю галерею изображений и хочу отображать заголовки в нижней части изображения следующим образом:
Изображение показывается без текста по умолчанию
При наведении курсора мыши на изображение внизу появляется темно-серый полупрозрачный фон (возможно, усеченный).
Предпочтительно, мой HTML остается как есть; самое главное, что изображения остаются в виде «display: inline-block», поскольку именно так они и нужны для макета.
(Необязательно) При наведении курсора на заголовок (если он был усечен), он раскрывается полностью
(Необязательно) Названия могут содержать ссылки / все изображение является ссылкой
Пожалуйста, смотрите графическое объяснение:
Это несколько похоже на то, какhttp://www.flickr.com/explore и многие другие сайты делают это.
Вот что у меня есть (на самом деле не так уж много, поскольку оно отображает заголовок по центру по вертикали, а не снизу):
.image-block {
display: inline-block;
margin: 0 0 0 0;
}
.container { /* testing only */
width: 1555px;
overflow: scroll;
}
.hover-me {
position: relative;
}
.hover-me img{
width:100%;
height:auto;
display: block;
}
.hover-me:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
background: rgba(128,128,128,.5);
transition: all .5s ease;
opacity: 0;
}
.hover-me .caption {
display: block;
height: 50%;
position: absolute;
top: 50%;
left: 0;
right: 0;
margin-top: -10px;
text-align: center;
transition: all .5s ease;
opacity: 0;
z-index: 2;
color: #fff;
}
.hover-me:hover:after , .hover-me:hover .caption {
opacity: 1;
}
<div class="container">
<span class="image-block hover-me ng-scope" style="padding-right: 5px; padding-bottom: 5px; height: 257px; width: 269px;">
<img class="hovertext" width="269" height="257" src="http://i.imgur.com/zOEilgll.jpg">
<span class="caption">This is a longish text of what looks like a camel; really quote a long long long long long long long long long long long long text</span>
</span><span class="image-block hover-me ng-scope" style="padding-right: 5px; padding-bottom: 5px; height: 257px; width: 385px;">
<img class="hovertext" width="385" height="257" src="http://i.imgur.com/jj1dY0sl.jpg">
<span class="caption">Well this is quite a pretty picture too</span>
</span><span class="image-block hover-me ng-scope" style="padding-right: 10px; padding-bottom: 5px; height: 257px; width: 396px;">
<img class="hovertext" width="396" height="257" src="http://i.imgur.com/yVlWIc0l.jpg">
<span class="caption">Omg what is this a black and white picture</span>
</span><span class="image-block hover-me ng-scope" style="padding-right: 0px; padding-bottom: 5px; height: 257px; width: 456px;">
<img class="hovertext" width="456" height="257" src="http://i.imgur.com/roRmFJWl.jpg">
<span class="caption">This is just an ordinary truck, I think... maybe; but the discription is really quite long</span>
</span><span class="image-block hover-me ng-scope" style="padding-right: 5px; padding-bottom: 5px; height: 289px; width: 433px;">
<img class="hovertext" width="433" height="289" src="http://i.imgur.com/yo2WhKFl.jpg">
<span class="caption">A great quote frm a great explorer</span>
</span>
<span>More images follow...</span>
</div>