Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Bootstrap - Thumbnail Hover Caption with Tooltip Blog Article: http://goo.gl/x2GSQ
<!-- Bootstrap Markup -->
<div class="container">
<ul class="thumbnails" id="hover-cap"> <!-- add id attr to thumbnail list -->
<li class="span3">
<div class="thumbnail">
<div class="caption">
<h4>Caption Title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
<p><a href="#" class="btn btn-inverse" rel="tooltip" title="Preview"><i class="icon-eye-open"></i></a> <a href="#" rel="tooltip" title="Visit Website" class="btn btn-inverse"><i class="icon-share"></i></a></p>
</div>
<img src="http://placehold.it/600x400" alt="ALT NAME">
</div>
<h4>Item Name</h4>
</li>
...
more li elements
...
</ul>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("[rel='tooltip']").tooltip();
$('#hover-cap .thumbnail').hover(
function(){
$(this).find('.caption').slideDown(250); //.fadeIn(250)
},
function(){
$(this).find('.caption').slideUp(250); //.fadeOut(205)
}
);
});
</script>
/* additional style */
#hover-cap .thumbnail {
position:relative;
overflow:hidden;
}
.caption {
display: none;
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4);
width: 100%;
height: 100%;
color:#fff !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.