"Nice Hover Effect"
Bootstrap 3.3.0 Snippet by creativealex

<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"> <h1 class="text-center">Nice Box Hover Effect</h1><br> <hr> <div class="story-content"> <div class="row story-hover"> <div class="col-sm-4 col-md-4"> <div class="story"> <a class="overlay" href="#"> <span class="story-content"> <i class="fa fa-users" aria-hidden="true"></i><br> Super Team </span> <img src="http://www.w3schools.com/css/img_fjords.jpg" class="img-responsive" alt="about"> </a> </div> </div> <div class="col-sm-4 col-md-4"> <div class="story"> <a class="overlay" href="#"> <span class="story-content"> <i class="fa fa-camera" aria-hidden="true"></i><br> Digital </span> <img src="http://www.w3schools.com/css/img_fjords.jpg" class="img-responsive" alt="about"> </a> </div> </div> <div class="col-xs-12 col-sm-4 col-md-4"> <div class="story"> <a class="overlay" href="#"> <span class="story-content"> <i class="fa fa-laptop" aria-hidden="true"></i><br> Responsive </span> <img src="http://www.w3schools.com/css/img_fjords.jpg" class="img-responsive" alt="about"> </a> </div> </div> </div> </div> </div> </div>
.story-hover { text-align: center; } .story-hover .story { background: #95e1d3; display: inline-block; } .story-hover .story .overlay { display: block; position: relative; left: 0; top: 0; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .story-hover .story .overlay:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; background: rgba(243,129,129,0.9); /* fallback for old browsers */ /* Chrome 10-25, Safari 5.1-6 */ background: -webkit-linear-gradient(top, rgba(243,129,129,0.9), rgba(252, 227, 138, 0.9)); background: -o-linear-gradient(top, rgba(243,129,129,0.9), rgba(252, 227, 138, 0.9)); background: linear-gradient(to bottom, rgba(243,129,129,0.9), rgba(252, 227, 138, 0.9)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } .story-hover .story:hover .overlay { left: -10px; top: -10px; } .story-hover .story:hover .overlay:before { opacity: 1; } .story-hover .story-content { position: absolute; left: 0; top: 50%; width: 100%; z-index: 1; opacity: 0; text-align: center; color: #fff; text-transform: uppercase; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .story-hover .story:hover .story-content { opacity: 1; font-size: 18px; font-weight: 500; }

Related: See More


Questions / Comments: