"Efecto marco"
Bootstrap 3.3.0 Snippet by jossss

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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="col-xs-4 grid col-offset-xs-4"> <div class="box"> <img src="http://2.bp.blogspot.com/_EZ16vWYvHHg/S-Bl2fuyyWI/AAAAAAAAMKc/DNayYJK8mEo/s1600/www.BancodeImagenesGratuitas.com-Fantasticas-20.jpg" class="img-responsive"> <div class="entry-content"> <div style="margin-top: -126px;" class="bottom-box"> <h5>GREAT ATMOSPHERE UNDER THE SUN OF THE BASSELLA RACE 2016.</h5> <span class="nickname">Ivan, Enduro, Bassella Race</span> <p style="display: none;" class="hidden_el">An audience success and a warm welcome for over 1200 riders could be a good summary of Bassella Race...</p> </div> </div> </div> </div> </div> </div>
body{ background-color:#333; width:100%; height:100%; color:#fff; } .grid { display: block; margin: 0; padding: 0; overflow: hidden; min-height: 200px; } .box { position: relative; display: block; width: 100%; padding: 2.5rem; z-index: 49; height: 250px; } .box img{ left: 0px; top: 0px; z-index:1; overflow: hidden; position: absolute; } .border { position: absolute; height: calc(100% - 2.5em); left: 0; top: 0; width: calc(100% - 2.5em); border: 1px solid rgba(255,255,255,0.5); color: #FFF; -ms-transform: scale(1.5); -webkit-transform: scale(1.5); transform: scale(1.5); z-index: 69; background: rgba(0,0,0,0.2); } .box:hover .border{ left: 1.25em; top: 1.25em; -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } .box .entry-content { width: 100%; height: 250px; z-index: 59; } .bottom-box { position: absolute; bottom: 0%; color: #FFF; z-index:1; } .bottom-box h5 { margin: 0; padding: 0; } .bottom-box p { margin: 1em 1em 1.5em 0; opacity: 0.75; } .hidden_el { display: none; } .border, .bottom-box, .hidden_el { -ms-transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1); -webkit-transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1); transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1); }
( function( $ ) { $('.box').prepend('<div class="border"></div>'); var pH; $('.box').each(function() { var $this = $(this); $this.on({mouseover:function(){ $this.find('.hidden_el').show(); pH = $this.find('.bottom-box').innerHeight() - 4; $this.find('.bottom-box').css({'margin-top': '-'+pH+'px', 'z-index':100}); },mouseout:function(){ $this.find('.hidden_el').hide(); pH = $this.find('.bottom-box').innerHeight() - 4; $this.find('.bottom-box').css({'margin-top': '-'+pH+'px', 'z-index':1}); } }); }); } )( jQuery );

Related: See More


Questions / Comments: