<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/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!--product-area-fade-effect--> <div class="container mt-60"> <div class="row"> <div class="col-lg-12"> <h1 class="theme-heading text-center">Image hover effect with caption CSS3 (Fade Effect)</h1> </div> <!--01--> <div class="col-lg-4 col-sm-6"> <div class="product-list-fade-effect"> <img src="http://placehold.it/600x500/9c27b0/fff" class="img-fluid" /> <div class="product-overlay"> <h3>Product 1</h3> <p>Cras pharetra lorem a arcu cursus consequat. Vivamus aliquet molestie tellus, porta</p> </div> </div> </div> <!--01--> <!--02--> <div class="col-lg-4 col-sm-6"> <div class="product-list-fade-effect"> <img src="http://placehold.it/600x500/4caf50/fff" class="img-fluid" /> <div class="product-overlay"> <h3>Product 2</h3> <p>Cras pharetra lorem a arcu cursus consequat. Vivamus aliquet molestie tellus, porta</p> </div> </div> </div> <!--02--> <!--03--> <div class="col-lg-4 col-sm-6"> <div class="product-list-fade-effect"> <img src="http://placehold.it/600x500/795548/fff" class="img-fluid" /> <div class="product-overlay"> <h3>Product 3</h3> <p>Cras pharetra lorem a arcu cursus consequat. Vivamus aliquet molestie tellus, porta</p> </div> </div> </div> <!--03--> </div> </div> <!--product-area-fade-effect-->

/*product-list-hover-effect*/ .product-list-fade-effect { width:100%; height:auto; position:relative; margin-bottom:20px; overflow:hidden; } .product-list-fade-effect img { transition-duration:0.4s; } .product-list-fade-effect .product-overlay { width:90%; height:90%; position:absolute; padding:20px; background:rgba(3, 122, 147, 0.9); color:#fff; top:5%; left:5%; opacity:0; transition-duration:0.4s; } .product-list-fade-effect .product-overlay h3 { margin:0 0 12px 0; } .product-list-fade-effect:hover .product-overlay { opacity:1; } .product-list-fade-effect:hover img { transform: scale(1.1); } /*product-list-hover-effect*/ .mt-60 { margin-top:60px; } .theme-heading { text-align:center; margin-bottom:2.8rem; font-weight:300; }