Simple Slide Up content on Hover

A simple css trick to make your thumbnail have a slide up effect on mouse hover.

HTML

<div class="col-md-4 box_industries">
<div>
<div class="image fill"><img src="http://lorempixel.com/g/400/200/" width="363" height="159" /></div>
<div class="content">
<h5>Title</h5>
This is my content

</div>
</div>
</div>

CSS

.box_industries {
background: green;
overflow: hidden;
text-align: center;
position: relative;
}

.box_industries .content
{
background: rgba( 0, 0, 0, 0.9 );
bottom: -100%;
color: #fff;
height: 100%;
left: 0%;
text-align: center;
position: absolute;
transition: bottom 0.5s ease;
width: 100%;
}
.box_industries:hover .content
{
bottom: 0%;
}