Skip to content

Instantly share code, notes, and snippets.

Last active February 8, 2020 12:52
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
<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>
<img src="" alt="ALT NAME">
<h4>Item Name</h4>
weitere Elemente
#hover-cap-4col .thumbnail {
.caption {
display: none;
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4);
width: 100%;
height: 100%;
color:#fff !important;
<script src=""></script>
<script src="//"></script>
<script type="text/javascript">
$('#hover-cap-4col .thumbnail').hover(
$(this).find('.caption').slideDown(250); //.fadeIn(250)
$(this).find('.caption').slideUp(250); //.fadeOut(205)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment