<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 ---------->
<!-- hover effect 1 -->
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="features1">
<img src="https://picsum.photos/360/280/?image=651">
<div class="box-content">
<img src="http://markobrando.com/gafa/img/loupe.svg">
</div>
</div>
</div>
<div class="col-md-4">
<div class="features1">
<img src="https://picsum.photos/360/280/?image=654">
<div class="box-content">
<img src="http://markobrando.com/gafa/img/loupe.svg">
</div>
</div>
</div>
<div class="col-md-4">
<div class="features1">
<img src="https://picsum.photos/360/280/?image=652">
<div class="box-content">
<img src="http://markobrando.com/gafa/img/loupe.svg">
</div>
</div>
</div>
</div>
</div><!-- /hover effect 1 -->
<br />
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="features2">
<img src="https://picsum.photos/360/280/?image=653">
<div class="box-content">
<div class="content">
<h3>PROJECT</h3>
<p>Image</p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="features2">
<img src="https://picsum.photos/360/280/?image=654">
<div class="box-content">
<div class="content">
<h3>PROJECT</h3>
<p>Image</p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="features2">
<img src="https://picsum.photos/360/280/?image=655">
<div class="box-content">
<div class="content">
<h3>PROJECT</h3>
<p>Image</p>
</div>
</div>
</div>
</div>
</div>
</div>
<br />
<!-- effect3 -->
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="features3">
<img src="https://picsum.photos/360/280/?image=660">
<div class="box-overlay">
<div class="content">
<p>Web Design</p>
<h3>City of Palaces</h3>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="features3">
<img src="https://picsum.photos/360/280/?image=661">
<div class="box-overlay">
<div class="content">
<p>Web Design</p>
<h3>City of Palaces</h3>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="features3">
<img src="https://picsum.photos/360/280/?image=662">
<div class="box-overlay">
<div class="content">
<p>Web Design</p>
<h3>City of Palaces</h3>
</div>
</div>
</div>
</div>
</div>
</div>
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,500i,600,600i,700,700i');
body{
font-family: 'Montserrat', sans-serif;
}
h2,h3,h4{
margin: 0px;
}
/* hover effect 1 */
.features1{
position: relative;
overflow: hidden;
margin-top: 15px;
}
.features1 .box-content img{
position: absolute;
width: 50px;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.features1 .box-content{
position: absolute;
top: 15px;
left: 15px;
bottom: 15px;
right: 15px;
background-color: rgba(0, 0, 0, 0.4);
opacity: 0;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.features1 .box-content:hover{
opacity: 1;
}
/* hover effect 2 */
.features2{
position: relative;
overflow: hidden;
margin-top: 15px;
}
.features2 .box-content{
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
background-color: rgba(255, 255, 255, 0.6);
opacity: 0;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.features2 .box-content .content{
font-weight: 500;
position: absolute;
width: 100%;
top: 50%;
text-align: center;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.features2 .box-content:hover{
opacity: 1;
}
/* hover effect 3 */
.features3{
position: relative;
overflow: hidden;
margin-top: 15px;
}
.features3 .box-overlay{
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
background-color: rgba(255, 6, 10, .8);
opacity: 0;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.features3 .box-overlay .content{
font-weight: 500;
position: absolute;
width: 100%;
top: 90%;
left: 55%;
opacity: 0;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.features3 .box-overlay .content p{
color: #fff;
font-size: 16px;
font-weight: 600;
margin-bottom: 4px;
}
.features3 .box-overlay .content h3{
color: #fff;
font-size: 24px;
font-weight: 600;
}
.features3 .box-overlay:hover{
opacity: 1;
}
.features3 .box-overlay:hover .content{
top: 80%;
left: 55%;
opacity: 1;
}
