"image hover #image #hover #image-hover #hover-effect"
Bootstrap 4.1.1 Snippet by SANTANU CHOWDHURY

<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 ----------> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="basic-padding"> <div class="image-hover"> <img src="https://via.placeholder.com/555x300" class="img-responsive"> <div class="overlay"> <h2>Project Title</h2> <a href="" class="btn-hover">Show More</a> </div> </div> </div> </div> <div class="col-md-6"> <div class="basic-padding"> <div class="image-hover"> <img src="https://via.placeholder.com/555x300" class="img-responsive"> <div class="overlay"> <h2>Project Title</h2> <a href="" class="btn-hover">Show More</a> </div> </div> </div> </div> <div class="col-md-6"> <div class="basic-padding"> <div class="image-hover"> <img src="https://via.placeholder.com/555x300" class="img-responsive"> <div class="overlay"> <h2>Project Title</h2> <a href="" class="btn-hover">Show More</a> </div> </div> </div> </div> <div class="col-md-6"> <div class="basic-padding"> <div class="image-hover"> <img src="https://via.placeholder.com/555x300" class="img-responsive"> <div class="overlay"> <h2>Project Title</h2> <a href="" class="btn-hover">Show More</a> </div> </div> </div> </div> </div> </div>
.basic-padding{ padding-top:15px; padding-bottom:15px; } .image-hover { background: -webkit-linear-gradient(45deg, #ff89e9 0, #05abe0 100%); background: linear-gradient(45deg, #ff89e9 0, #05abe0 100%); position: relative; width: 100%; height: 100%; overflow: hidden; } .image-hover .overlay { width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0; left: 0; padding: 40px; text-align: left; } .image-hover .overlay::before { content: ''; -webkit-transition: opacity 0.35s, -webkit-transform 0.45s; position: absolute; top: 20px; right: 20px; bottom: 20px; left: 20px; border: 1px solid #fff; opacity: 0; transition: opacity .35s, transform .45s; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } .image-hover img { -webkit-transition: opacity 0.35s, -webkit-transform 0.45s; max-width: none; width: calc(108%); transition: opacity .35s, transform .45s; -webkit-transform: translate3d(-40px, 0, 0); transform: translate3d(-40px, 0, 0); } .image-hover h2 { padding: 15% 0 10px; color: #fff; position: relative; font-size: 17px; text-transform: uppercase; } .image-hover .btn-hover { display: inline-block; color: #fff; opacity: 0; margin: 0; padding: 0; border: none; -webkit-transition: opacity 0.35s, -webkit-transform 0.45s; transition: opacity .35s, transform .45s; -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } .image-hover:hover img { opacity: .6; -webkit-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); } .image-hover:hover .overlay::before { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .image-hover:hover .btn-hover { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

Related: See More


Questions / Comments: