<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="grid mask"> <figure> <img src="http://placehold.it/300/fff.png" alt="canvas" class="img-responsive" id="animate"> <figcaption> <h5>Erlebnis</h5> </figcaption><!-- /figcaption --> </figure><!-- /figure --> </div><!-- /grid-mask --> </div> </div>

#animate{ transition: all 1s ease; } .row{ max-width:20em; !important; padding:10px; background:black; position:relative; } #animate:hover{ opacity:.5; } #animate:hover+figcaption{ opacity:.7; top:1.2em;; left:1.2em; box-shadow:0px 1px 12px black; } .row#animate:hover{ background:black; } figcaption{ position:absolute; top:-1em; left:0; padding:2em; color:black; background:white; opacity:0; border-radius:1em; transition:all .5s ease-in-out; }