<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"> <h1>bootstrap image thumbnail hover effect text</h1> <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12"> <div class="hovereffect"> <img class="img-responsive" src="http://placehold.it/350x200" alt=""> <div class="overlay"> <h2>Image heading</h2> <p class="info">Our sleek quality work and synergized effect of our team’s creative mind have paved the way for offering innovative services to our clients. <a href="#">read more</a></p> </div> </div> </div> </div>

.col-big{ position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; width:20%; } .hovereffect { width: 100%; height: 100%; float: left; overflow: hidden; position: relative; text-align: center; cursor: default; } .hovereffect .overlay { width: 100%; height: 100%; position: absolute; overflow: hidden; top: 0; left: 0; background-color: rgba(75,75,75,0.7); -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .hovereffect:hover .overlay { background-color: rgba(48, 152, 157, 0.4); } .hovereffect img { display: block; position: relative; } .hovereffect h2 { text-transform: uppercase; color: #fff; text-align: center; position: relative; font-size: 17px; padding: 10px; background: rgba(0, 0, 0, 0.6); -webkit-transform: translateY(45px); -ms-transform: translateY(45px); transform: translateY(45px); -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .hovereffect:hover h2 { -webkit-transform: translateY(5px); -ms-transform: translateY(5px); transform: translateY(5px); margin:0px; } .hovereffect p.info { display: inline-block; text-decoration: none; padding: 7px 14px; text-transform: uppercase; color: #fff; border: 1px solid #fff; background-color: transparent; opacity: 0; filter: alpha(opacity=0); -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; font-weight: normal; margin: 7px; } .hovereffect:hover p.info { opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .hovereffect p.info:hover { box-shadow: 0 0 5px #fff; }