<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;
}
