<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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="thumbnails"> <div class="col-sm-4"> <div class="thumbnail thumbnail-kenburn"> <div class="overflow-hidden"><img src="http://placehold.it/1900x400" alt="" class="img-responsive"></div> <div class="caption"> <h3>Überschrift 1</h3> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nullam nieh.</p> <p><a href="#" class="btn btn-primary btn-block" role="button">Some Action</a></p> </div> </div> </div> <div class="col-sm-4"> <div class="thumbnail thumbnail-kenburn"> <div class="overflow-hidden"><img src="http://placehold.it/1900x400" alt="" class="img-responsive"></div> <div class="caption"> <h3>Überschrift 2</h3> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nullam nieh.</p> <p><a href="#" class="btn btn-primary btn-block" role="button">Some Action</a></p> </div> </div> </div> <div class="col-sm-4"> <div class="thumbnail thumbnail-kenburn"> <div class="overflow-hidden"><img src="http://placehold.it/1900x400" alt="" class="img-responsive"></div> <div class="caption"> <h3>Überschrift 3</h3> <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nullam nieh.</p> <p><a href="#" class="btn btn-primary btn-block" role="button">Some Action</a></p> </div> </div> </div> </div><!--/thumbnails-->

.thumbnail-style { padding:5px; border-radius:2px; } .thumbnail-style:hover { box-shadow:0 0 8px #ddd; -webkit-transition:box-shadow 0.2s ease-in-out; -moz-transition:box-shadow 0.2s ease-in-out; -o-transition:box-shadow 0.2s ease-in-out; transition:box-shadow 0.2s ease-in-out; } .thumbnail-style h3 { margin:5px 0 0 0; } .thumbnail-style h3 a { font-size:20px; } .thumbnail-style h3 a:hover { color:#72c02c; text-decoration:none; } .thumbnail-style .thumbnail-img { position:relative; } .thumbnail-style a.btn-more { right:-10px; bottom:10px; color:#fff; padding:1px 6px; position:absolute; background:#72c02c; display:inline-block; } .thumbnail-style a.btn-more:hover { text-decoration:none; box-shadow:0 0 0 2px #377500; } .thumbnail-style:hover a.btn-more { right:10px; } .thumbnail-kenburn img { left:10px; margin-left:-10px; position:relative; -webkit-transition: all 0.8s ease-in-out; -moz-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } .thumbnail-kenburn:hover img { -webkit-transform: scale(1.2) rotate(2deg); -moz-transform: scale(1.2) rotate(2deg); -o-transform: scale(1.2) rotate(2deg); -ms-transform: scale(1.2) rotate(2deg); transform: scale(1.2) rotate(2deg); } .overflow-hidden { overflow:hidden;} ul {list-style-type: none;margin:0;}