Simple Slide Up content on Hover

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


<div class="col-md-4 box_industries">
<div class="image fill"><img src="" width="363" height="159" /></div>
<div class="content">
This is my content



.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%;
Posted in CSS

Leave a Reply

Your email address will not be published. Required fields are marked *