<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-md-4 col-sm-6"> <div class="box"> <img src="images/img-1.jpg" alt=""> <div class="box-content"> <h3 class="title">Web Developer</h3><br> <h6>Lorem ipsum about Web Developers dolor simmit illit... </h6> <a href="#" class="read">Read More</a> </div> </div> </div> </div> </div>

.box{ position: relative; overflow: hidden; } .box img{ width: 100%; height: auto; transform: translateY(0); transition: transform 0.30s ease 0s; } .box:hover img{ transform: translateY(-10%); } .box-content{ position: absolute; bottom: 0; width: 100%; padding: 25px; background: #333; transform: translateY(100%); transition: all 0.30s ease 0s; } .box:hover .box-content{ transform: translateY(0); } .box-content .title{ color: #fff; margin: 0; padding: 0; display:inline-block; text-transform: capitalize; } .box-content .read{ float: right; display: inline-block; width: 100px; height: 30px; line-height: 30px; color: #fff; text-align: center; background: #1dcfd1; } .box-content .read:hover{ text-decoration: none; } @media only screen and (max-width: 990px){ .box{ margin-bottom: 20px; } } @media only screen and (max-width: 359px){ .box-content .title{ font-size: 19px; } .box-content .read{ width: 85px; } }