Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!-- Headbereich -->
<link rel="stylesheet" type="text/css" href="css/animate.min.css">
<!-- HTML Element -->
<div id="logo" class="animated rotateIn">Company XY</div>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<div class="caption animated">
<h4>Das ist eine Überschrift</h4>
<p>Kurze Beschreibung zum Bild oder Projekt</p>
<p><a href="" class="label label-danger" rel="tooltip" title="Vergrößern">Zoom</a>
<a href="" class="label label-default" rel="tooltip" title="Download now">Download</a></p>
</div>
<img src="../img/thumbnail.jpg" alt="...">
</div>
</div>
</div>
<style>
.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;
}
</style>
<script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$( ".thumbnail" )
.mouseenter(function() {
$(this).find('.caption').removeClass("slideOutLeft").addClass("slideInLeft").show();
})
.mouseleave(function() {
$(this).find('.caption').removeClass("slideInLeft").addClass("slideOutLeft");
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
if ($.browser.msie && parseInt($.browser.version) < 10){
$( ".thumbnail" )
.mouseenter(function() {
$(this).find('.caption').fadeIn(500);
})
.mouseleave(function() {
$(this).find('.caption').fadeOut(1000);
});
}
});
</script>
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.