"Portfolio Hover effects"
Bootstrap 3.3.0 Snippet by prakash044

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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="http://www.estreet.in/wp-content/uploads/2014/05/web-design-banner.png" alt="">
<a href="#" class="box-content">
<h4 class="title">Web designer</h4>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam.</p>
</a>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="box">
<img src="http://www.estreet.in/wp-content/uploads/2014/05/web-design-banner.png" alt="">
<a href="#" class="box-content">
<h4 class="title">Web designer</h4>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam.</p>
</a>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="box">
<img src="http://www.estreet.in/wp-content/uploads/2014/05/web-design-banner.png" alt="">
<a href="#" class="box-content">
<h4 class="title">Web designer</h4>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam.</p>
</a>
</div>
</div>
</div>
</div>
<div class="container">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.box{
border:4px solid #fff;
box-shadow:0 0 4px grey;
position:relative;
}
.box:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0) linear-gradient(45deg, #141414 0%, #691100 40%, #1b1b1b 100%);
opacity: 0.3;
transition:all 0.5s ease;
}
.box img{
width:100%;
height: auto;
}
.box .box-content{
background: rgba(0,0,0,0);
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
padding: 38px;
transition: all 0.35s ease 0s;
}
.box:hover .box-content{
background: rgba(0,0,0,0.5);
}
.box .box-content:after{
content: "";
border: 7px solid #fff;
position: absolute;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Black Dashboard
Hover Effect Style
Different types of hover and transition effect.
Owl Carousel Arrows on hover

Questions / Comments: