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