Skip to content

Instantly share code, notes, and snippets.

@loschke
Last active February 8, 2020 12:52
Show Gist options
  • Save loschke/f1dde492e58a077982f4fff1e98259ad to your computer and use it in GitHub Desktop.
Save loschke/f1dde492e58a077982f4fff1e98259ad to your computer and use it in GitHub Desktop.
<ul class="thumbnails" id="hover-cap-4col">
<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>
...
weitere Elemente
...
</ul>
<style>
#hover-cap-4col .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;
}
</style>
<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-4col .thumbnail').hover(
function(){
$(this).find('.caption').slideDown(250); //.fadeIn(250)
},
function(){
$(this).find('.caption').slideUp(250); //.fadeOut(205)
}
);
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment