I'm developing an image gallery and want to display titles on the bottom of an image in the following way:
Image is shown without any text by default
When hovering mouse over image, a (possibly truncated) title appears on the bottom on a dark-gray semi-transparent background
Preferably, my HTML stays as is; most importantly the images remain as 'display: inline-block' as that's how they are needed for the layout.
(Optional) When hovering over the title (if it was truncated) it is expanded fully
(Optional) Titles can contain links / whole image is a link
Please see a graphical explanation:
This is somewhat similar to how http://www.flickr.com/explore and many other sites do it.
Here is what I have so far (not too much, actually, as it renders the title in the vertical middle, not on the bottom):
.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>
Well, it's pretty easy, you will need CSS Positioning here, wrap the element using position: relative;
container... I made this from scratch, see if it's useful to you, if you need any modifications, just ping me..
Explanation: First am making the .wrap
element position: relative;
just to make sure the nested absolute
positioned span
stays relative to the container.
In the next selector i.e .wrap span
am using position: absolute;
for span
with a negative margin, which is deliberately overflown, so that it hides.
Coming to next selector i.e .wrap:hover span
will show the first line of the span
element.
And the last selector which is .wrap:hover span:hover
will show the rest of the text.
Demo
Demo 2 [1] Fixed white-space
at the bottom
.wrap {
position: relative;
display: inline-block;
overflow: hidden;
}
.wrap span {
position: absolute;
bottom: -70px;
background: rgba(0,0,0,.8);
color: #fff;
left: 0;
width: 100%;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
}
.wrap:hover span {
bottom: -40px;
}
.wrap:hover span:hover {
bottom: 0;
}
.wrap img {
display: block;
}
[1] Add this to your code to fix the white-space
at the bottom of the image.
Note: The dimensions are fixed, if you think the text for each thumbnail may vary to a great extent, than I will recommend you to use jQuery and set the
height
of thespan
elements accordingly.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With