"Hover effect Grid"
Bootstrap 3.3.0 Snippet by sachinkul6185@gmail.com

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">
<h1 class="text-center">by Sachin</h1>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="sample">
<img src="https://static.pexels.com/photos/33045/lion-wild-africa-african.jpg" alt="sample" />
<span class="top"></span>
<span class="right"></span>
<span class="bottom"></span>
<span class="left"></span>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="sample">
<img src="https://static.pexels.com/photos/33045/lion-wild-africa-african.jpg" alt="sample" />
<span class="top"></span>
<span class="right"></span>
<span class="bottom"></span>
<span class="left"></span>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="sample">
<img src="https://static.pexels.com/photos/33045/lion-wild-africa-african.jpg" alt="sample" />
<span class="top"></span>
<span class="right"></span>
<span class="bottom"></span>
<span class="left"></span>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="sample">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
:after,*{transition: all 0.35s ease;
-webkit-transition: all 0.35s ease;
-moz-transition: all 0.35s ease;
-moz-transition: all 0.35s ease;
-ms-transition: all 0.35s ease;
-o-transition: all 0.35s ease;}
img{max-width:100%;}
.sample{background:#000;margin-bottom:15px;float:left;position:relative;text-align:center;line-height:100px;font-size:18px;position:relative;box-shadow:5px 5px 10px #888;overflow:hidden}
.sample .top{position:absolute;top:5%; left:5%;width:90%;height:2px;background:#542222;}
.sample .top:after{position:absolute;top:0; left:0;width:50px;height:2px;background:#ff0000;content:"";}
.sample .right{position:absolute;top:5%; right:5%;height:90%;width:2px;background:#542222;}
.sample .right:after{position:absolute;top:0; left:0;height:50px;width:2px;background:#ff0000;content:""}
.sample .bottom{ position: absolute; bottom: 5%; right: 5%; height: 2px; width: 90%; background: #542222;}
.sample .bottom:after{position:absolute;top:0; right:0;width:50px;height:2px;background:#ff0000;content:""}
.sample .left{ position: absolute; bottom: 5%; left: 5%; height: 90%; width:2px; background: #542222;}
.sample .left:after{ position:absolute;bottom:0; left:0;height:50px;width:2px;background:#ff0000;content:""}
.sample:hover .top:after{width:100%;background:#fff}
.sample:hover .left:after{height:100%;background:#fff}
.sample:hover .bottom:after{width:100%;background:#fff}
.sample:hover .right:after{height:100%;background:#fff}
.sample:hover img{transform:scale(1.1)}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Dashboard PRO React
Hover Effect Style
Different types of hover and transition effect.
Sonar Wave Effect in Circle With CSS

Questions / Comments: