"Hover card effect + gallery image + ravi"
Bootstrap 4.0.0 Snippet by ravi7284007

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/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<h1>Ravi Singh</h1>
<div class="hls_sol">
<ul>
<li>
<img src="https://picsum.photos/600/700/?random" alt="">
<div class="hls_sol_data">
<h3>Casual</h3>
<div class="hls_data">
<a href="https://500px.com/ravi7284007" target="_blank" class="hls_title">Ravi On 500PX</a>
<a href="#https://www.facebook.com/ravi7284007" class="btn btn-pro" target="_blank"> Facebook</a>
</div>
</div>
</li>
<li>
<img src="https://picsum.photos/600/800/?random" alt="">
<div class="hls_sol_data">
<h3>Street</h3>
<div class="hls_data">
<a href="https://500px.com/ravi7284007" target="_blank" class="hls_title">Ravi On 500PX</a>
<a href="https://www.facebook.com/ravi7284007" class="btn btn-pro" target="_blank"> Facebook</a>
</div>
</div>
</li>
<li>
<img src="https://picsum.photos/600/750/?random" alt="">
<div class="hls_sol_data">
<h3>Dapper</h3>
<div class="hls_data">
<a href="https://500px.com/ravi7284007" target="_blank" class="hls_title">Ravi On 500PX</a>
<a href="https://www.facebook.com/ravi7284007" class="btn btn-pro" target="_blank"> Facebook</a>
</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
body{ min-height:1500px;
background:url(https://img4.goodfon.com/original/1920x1080/3/bb/iron-man-art-vector-art-marvel-minimal-avengers-superheroes.jpg) fixed;
background-size:cover;}
img {
max-width: 100%;
height: auto;
}
ul li {
list-style: none
}
a, a:hover {
text-decoration: none;
box-shadow: none;
outline: none;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
h1{ text-align:center; margin:30px 0; color:#fff;}
.hls_sol li {
width: 25%;
max-width: 100%;
display: inline-block;
float: left;
text-align: center;
overflow: hidden;
position: relative;
height: 523px
}
.hls_sol li img {
height: 100%;
}
.hls_sol ul {
padding: 0;
display: flow-root;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Gaia Bootstrap Template
Hover Effect Style
Different types of hover and transition effect.
Sonar Wave Effect in Circle With CSS

Questions / Comments: