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

<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> <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/3/" 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/4/" alt="..."> </div> </div> </div> </div><!-- /.container -->
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; }
$( document ).ready(function() { $("[rel='tooltip']").tooltip(); $('.thumbnail').hover( function(){ $(this).find('.caption').slideDown(250); //.fadeIn(250) }, function(){ $(this).find('.caption').slideUp(250); //.fadeOut(205) } ); });

Related: See More


Questions / Comments:

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

Tom Toa () - 7 years ago - Reply 0


exelente...

hector () - 8 years ago - Reply 0


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

abhay () - 8 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 () - 8 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 () - 9 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] () - 9 years ago - Reply 0


Thanks! This was very helpful. Good work

Ben () - 9 years ago - Reply 0


Thanks.Awesome.

zamir mm () - 9 years ago - Reply 0


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

nmk () - 9 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 () - 8 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 () - 9 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 () - 9 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 () - 9 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 () - 9 years ago - Reply 0


you're welcome!

maxsurguy () - 9 years ago - Reply 0


not working ;(

hadi swaleh () - 9 years ago - Reply 0


what exactly is not working?

maxsurguy () - 9 years ago - Reply 0


Thank you very much. It has helped me alot!

Bryan Rojas () - 9 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 () - 10 years ago - Reply 0


very nice

teejten () - 10 years ago - Reply 0


Sweet! Thanks for sharing sevenx.de :)

AZU AZU () - 10 years ago - Reply 0


awsome

raj () - 10 years ago - Reply 0