"Crazy Icon Hover Effect"
Bootstrap 4.1.1 Snippet by koshikojha

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="http://static.crazycafe.net/crazycafe/inkist/assets/css/bootstrap.min.css" rel="stylesheet">
<div class="app-logo-area wow fadeInUp">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="app-logo">
<ul>
<li><img src="http://static.crazycafe.net/crazycafe/inkist/assets/img/app-logo1.png" alt=""></li>
<li><img src="http://static.crazycafe.net/crazycafe/inkist/assets/img/app-logo2.png" alt=""></li>
<li><img src="http://static.crazycafe.net/crazycafe/inkist/assets/img/app-logo7.png" alt=""></li>
<li><img src="http://static.crazycafe.net/crazycafe/inkist/assets/img/app-logo3.png" alt=""></li>
<li><img src="http://static.crazycafe.net/crazycafe/inkist/assets/img/app-logo4.png" alt=""></li>
<li><img src="http://static.crazycafe.net/crazycafe/inkist/assets/img/app-logo8.png" alt=""></li>
<li><img src="http://static.crazycafe.net/crazycafe/inkist/assets/img/app-logo5.png" alt=""></li>
<li><img src="http://static.crazycafe.net/crazycafe/inkist/assets/img/app-logo9.png" alt=""></li>
<li><img src="http://static.crazycafe.net/crazycafe/inkist/assets/img/app-logo6.png" alt=""></li>
<li><img src="http://static.crazycafe.net/crazycafe/inkist/assets/img/app-logo10.png" alt=""></li>
<li><img src="http://static.crazycafe.net/crazycafe/inkist/assets/img/app-logo11.png" alt=""></li>
<li><img src="http://static.crazycafe.net/crazycafe/inkist/assets/img/app-logo12.png" alt=""></li>
<li><img src="http://static.crazycafe.net/crazycafe/inkist/assets/img/app-logo13.png" alt=""></li>
</ul>
</div>
</div>
</div>
</div>
</div>
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
*{background: #071349;}
.app-logo-area {
padding-top: 70px;
padding-bottom: 270px;
}
.app-logo li {
display: inline-block;
background: #07144a;
box-shadow: 0px 0px 68px 20px #0a3261;
border-radius: 100px;
text-align: center;
cursor: pointer;
-webkit-transition: .4s;
transition: .4s;
}
.app-logo li:nth-child(3) {
height: 172px;
width: 172px;
line-height: 172px;
}
.app-logo li:nth-child(5),
.app-logo li:nth-child(1),
.app-logo li:nth-child(2) {
height: 150px;
width: 150px;
line-height: 150px;
}
.app-logo li:nth-child(6),
.app-logo li:nth-child(7),
.app-logo li:nth-child(10),
.app-logo li:nth-child(11),
.app-logo li:nth-child(13),
.app-logo li:nth-child(8) {
height: 95px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: