"Hover Final"
Bootstrap 4.1.1 Snippet by Goretech

<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> </div> </div> <div class="col-sm-12 col-md-6"> <h2 class="sector">Education - Temporary</h2> <div class="box20 red"> <img src="https://blog.invervemarketing.com/hubfs/IMS/sectors-sample2.jpg" alt=""> <div class="box-content"> <i class="fas fa-graduation-cap circle-icon"></i> <h3 class="title">Temporary modular classrooms, additions and schools</h3> <p><a class="button" href="/more">Learn More</a></p> </div> </div> </div> <div class="col-sm-12 col-md-6"> <h2 class="sector">Commercial</h2> <div class="box20 yellow"> <img src="https://blog.invervemarketing.com/hubfs/IMS/sectors-sample3.jpg" alt=""> <div class="box-content"> </i><i class="fas fa-building circle-icon"></i> <h3 class="title">Offices, finance, retail and training services</h3> <p><a class="button" href="/more">Learn More</a></p> </div> </div> </div> <div class="col-sm-12 col-md-6"> <h2 class="sector">Government</h2> <div class="box20 blue"> <img src="https://blog.invervemarketing.com/hubfs/IMS/sectors-sample2.jpg" alt=""> <div class="box-content"> <i class="fas fa-city circle-icon"></i> <h3 class="title">Offices, clinics, classrooms and specialty buildings</h3> <p><a class="button" href="/more">Learn More</a></p> </div> </div> </div> <div class="col-sm-12 col-md-6"> <h2 class="sector">Healthcare</h2> <div class="box20 red"> <img src="https://blog.invervemarketing.com/hubfs/IMS/sectors-sample1.jpg" alt=""> <div class="box-content"> <i class="fas fa-clinic-medical circle-icon"></i> <h3 class="title">Hospitals, clinics, dialysis and imaging suites</h3> <p><a class="button" href="/more">Learn More</a></p> </div> </div> </div> <div class="col-sm-12 col-md-6"> <h2 class="sector">Specialty</h2> <div class="box20 yellow"> <img src="https://blog.invervemarketing.com/hubfs/IMS/sectors-sample3.jpg" alt=""> <div class="box-content"> <i class="fas fa-hotel circle-icon"></i> <h3 class="title">Custom building designs to fit any need</h3> <p><a class="button" href="/more">Learn More</a></p> </div> </div> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
/*********************** 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} } @media only screen and (max-width:479px){.box20 .title{font-size:16px} }

Related: See More


Questions / Comments: