Code Snippets zu Blogbeitrag https://sevenx.de/bootstrap-3-thumbnail-caption-animation-mit-animate-css-tutorial/

01-animate-sample.html

<!-- Headbereich -->
<link rel="stylesheet" type="text/css" href="css/animate.min.css">

<!-- HTML Element -->
<div id="logo" class="animated rotateIn">Company XY</div>

02-thumb-grid.html

<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>

03-thumb-grid-css.html

<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>

04-thumb-grid-js.html

<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>

05-ie-js-hack.html

<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>