"Thumbnail Caption Hover Effect"
Bootstrap 3.0.0 Snippet by sevenx.de

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<div class="caption">
<h4>Thumbnail Headline</h4>
<p>short thumbnail description</p>
<p><a href="" class="label label-danger" rel="tooltip" title="Zoom">Zoom</a>
<a href="" class="label label-default" rel="tooltip" title="Download now">Download</a></p>
</div>
<img src="http://lorempixel.com/400/300/sports/1/" alt="...">
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<div class="caption">
<h4>Thumbnail Headline</h4>
<p>short thumbnail description</p>
<p><a href="" class="label label-danger" rel="tooltip" title="Zoom">Zoom</a>
<a href="" class="label label-default" rel="tooltip" title="Download now">Download</a></p>
</div>
<img src="http://lorempixel.com/400/300/sports/2/" alt="...">
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<div class="caption">
<h4>Thumbnail Headline</h4>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
body {
padding-top: 50px;
}
.thumbnail {
position:relative;
overflow:hidden;
}
.caption {
position:absolute;
top:0;
right:0;
background:rgba(66, 139, 202, 0.75);
width:100%;
height:100%;
padding:2%;
display: none;
text-align:center;
color:#fff !important;
z-index:2;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
$( document ).ready(function() {
$("[rel='tooltip']").tooltip();
$('.thumbnail').hover(
function(){
$(this).find('.caption').slideDown(250); //.fadeIn(250)
},
function(){
$(this).find('.caption').slideUp(250); //.fadeOut(205)
}
);
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

Thank you for the code.. clear and simple :)

Tom Toa () - 8 years ago - Reply 0


exelente...

hector () - 9 years ago - Reply 0


hover effect is not working....what to do with that???

abhay () - 9 years ago - Reply 0


Hello, thank you for the code. A question, How can I wrap my thumbnail with a hyperlink()? Can't find a solution. Thank you

Daniel Vasile () - 9 years ago - Reply 0


Why need JavaScript? This can be done in pure CSS3, which I done for my project, thanks for your rgba color - I like it.

AngularJS WebDesigner () - 10 years ago - Reply 0


Actually, you don't need "CSS3", just plain CSS.
Some hover and absolute positioning. All CSS3 would do is ease transition or animation, but functionality can be done with plain ol' css :)

Lauhakari [mikko] () - 10 years ago - Reply 0


Thanks! This was very helpful. Good work

Ben () - 10 years ago - Reply 0


Thanks.Awesome.

zamir mm () - 10 years ago - Reply 0


how to hover this effect for bottom as in this the hover is from top

nmk () - 10 years ago - Reply 0


Use it.

.thumbnail {
position:relative;
overflow:hidden;
}

.caption {
position:absolute;
bottom:0;
right:0;
background:rgba(66, 139, 202, 0.75);
width:100%;
height:100%;
padding:2%;
display: none;
text-align:center;
color:#fff !important;
z-index:2;
}

rajeshdoot () - 9 years ago - Reply 0


//this is better to stop hover when u do very hover on it .
$( document ).ready(function() {
$("[rel='tooltip']").tooltip();

$('.thumbnail').hover(
function(){
$(this).find('.caption').slideDown(300); //.fadeIn(250)
},
function(){
$(this).find('.caption').slideUp(300,function(){$ (this).stop( true, true )}); //.fadeOut(205) and stop hover
}
);
});

Ali Zamani () - 10 years ago - Reply 0


Love this effect. Is there a way to have the text and links at the bottom of the image instead of the top?

Linda Smith () - 10 years ago - Reply 0


you would probably need to modify the top - margin for the .caption class . For example try setting it to 150px;

maxsurguy () - 10 years ago - Reply 0


That didn't work... but I added 100px of padding to the h4 title and it centered the text in the thumbnail.
Thanks for your help!

Linda Smith () - 10 years ago - Reply 0


you're welcome!

maxsurguy () - 10 years ago - Reply 0


not working ;(

hadi swaleh () - 10 years ago - Reply 0


what exactly is not working?

maxsurguy () - 10 years ago - Reply 0


Thank you very much. It has helped me alot!

Bryan Rojas () - 10 years ago - Reply 0


Thank you for this :)

I have one problem though; I combined your code with this technique: http://untame.net/2013/05/h...
but after the sorting the caption hover no longer works (it is gone). Any idea what could cause that and how to fix it?

Blaze () - 10 years ago - Reply 0


thanks so much ..but this not working weel om col-sm ie when width =768 caption bg become larger than image..how can i fix this

Aml Mhmod () - 10 years ago - Reply 0


Thanks so much!!!

JoZ3 () - 11 years ago - Reply 0


very nice

teejten () - 11 years ago - Reply 0


Sweet! Thanks for sharing sevenx.de :)

AZU AZU () - 11 years ago - Reply 0


awsome

raj () - 11 years ago - Reply 0