<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!--product-area-left-slide-effect--> <div class="container" style="margin-top:80px;"> <div class="row"> <div class="col-lg-12"> <h1 class="theme-heading">Image hover effect with caption CSS3 (Left Slide Effect)</h1> </div> <!--01--> <div class="col-lg-4 col-sm-6"> <div class="product-list-left-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-left-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-left-effect"> <img src="http://placehold.it/600x500/c37808/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-left-slide-effect-->

/*product-list-hover-slide-effect*/ .product-list-left-effect { width:100%; height:auto; position:relative; margin-bottom:20px; overflow:hidden; } .product-list-left-effect img { transition-duration:0.4s; } .product-list-left-effect .product-overlay { width:90%; height:90%; position:absolute; padding:20px; background:rgba(0, 0, 0, 0.7); color:#fff; top:5%; left:-100%; transition-duration:0.4s; -webkit-transition: left 0.5s ease-in-out; } .product-list-left-effect .product-overlay h3 { margin:0 0 12px 0; } .product-list-left-effect:hover .product-overlay { /*opacity:1;*/ -webkit-transition: left 0.5s ease-in-out; left:5%; } .product-list-left-effect:hover img { transform: scale(1.1); } /*product-list-hover-slide-effect*/ /*theme-heading*/ .theme-heading { text-align:center; margin-bottom:2rem; font-weight:300; }