"Hover Final"
Bootstrap 4.1.1 Snippet by Goretech

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.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="//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 ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hover Effect Style</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<!------------------ Hover Effect Style : Demo - 20 --------------->
<div class="container mt-40">
<h3 class="text-center">Hover Effect Style : Demo - 20</h3>
<div class="row mt-30">
<div class="col-sm-12 col-md-6">
<h2 class="sector">Education - Permanent</h2>
<div class="box20 blue">
<img src="https://blog.invervemarketing.com/hubfs/IMS/sectors-sample1.jpg" alt="">
<div class="box-content">
<i class="fas fa-university circle-icon"></i>
<h3 class="title">Permanent modular classrooms, additions and schools</h3>
<p><a class="button" href="/more">Learn More</a></p>
</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
/*********************** Demo - 20 *******************/
.box20,.box20 .icon li a{overflow:hidden}
.box20 {box-shadow:0 0 5px #a3a3a3}
.box20 .post,.box20 .title{text-transform:capitalize; width:60%;}
.box20{position:relative}
.box20:after,.box20:before{position:absolute;content:""}
.box20:before{width:80%;height:220%;background:#0062b2;top:-50%;left:-100%;z-index:1;transform:rotate(25deg);transform-origin:center top 0;transition:all .5s ease 0s}
.box20.blue:before{background:#0062b2!important;}
.box20.red:before{background:#b31d23!important;}
.box20.yellow:before{background:#efc203!important;}
.box20:hover:before{left:10%}
.box20:after{width:55%;height:175%;background-color:rgba(0,0,0,.8);bottom:-1000%;left:53%;transform:rotate(-33deg);transform-origin:center bottom 0;transition:all .8s ease 0s}
.box20 .box-content,.box20 .icon{width:100%;padding:0 20px;position:absolute;left:0;z-index:2;transition:all 1.1s ease 0s}
.box20:hover:after{bottom:-70%}
.box20 img{width:100%;height:auto}
.box20 .box-content{top:-100%;color:#fff}
.box20:hover .box-content{top:30px}
.box20 .title{font-size:20px;margin:0}
.box20 .icon li a,.box20 .post{display:inline-block;font-size:14px}
.box20 .post{margin-top:5px}
.box20 .icon{list-style:none;margin:0;bottom:-100%}
.box20:hover .icon{bottom:25px}
.box20 .icon li{display:inline-block}
.box20 .icon li a{width:35px;height:35px;line-height:35px;background:#ff0000;border-radius:50%;margin:0 3px;color:#fff;text-align:center;transition:all .5s ease 0s}
.box20 .icon li a:hover{background:#fff;}
.box20 .button {background-color:#8e909b;border-radius:3px;display:inline-block;padding:6px 12px;margin-top:10px;}
.box20 .button:hover {background-color:#000000;}
.box20 a, box20 a:link, box20 a:visited, box20 a:hover, box20 a:active {color:#ffffff!important;}
.icon {display:inline-block;height:60px;width:auto;}
.fas {font-size:32px;background-color:rgba(0,0,0,.1);border-radius:100px;height:55px;width:55px;line-height:55px;display:inline-block;vertical-align:middle;text-align:center;}
.circle-icon {background: rgba(0,0,0,.1);width: 66px;height: 66px;border-radius: 50%;text-align: center;line-height: 50px;vertical-align: middle;padding: 15px;}
h2.sector {font-size:26px;color:#555555;}
@media only screen and (max-width:990px){
.box20{margin-bottom:30px}
.box20 .title{font-size:16px}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Bootstrap Wizard
Hover Effect Style
Different types of hover and transition effect.
Owl Carousel Arrows on hover

Questions / Comments: