<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-sm-4"> <figure> <img src="https://picsum.photos/id/645/635/475" class="img-fluid" alt="img01"> <figcaption> <h3>Product 01</h3> <span>Yusuf</span> <a href="#">Buy</a> </figcaption> </figure> </div> <div class="col-sm-4"> <figure> <img src="https://picsum.photos/id/393/635/475" class="img-fluid" alt="img02"> <figcaption> <h3>Product 02</h3> <span>Yusuf</span> <a href="#">Buy</a> </figcaption> </figure> </div> <div class="col-sm-4"> <figure> <img src="https://picsum.photos/id/985/635/475" class="img-fluid" alt="img03"> <figcaption> <h3>Product 03</h3> <span>Yusuf</span> <a href="#">Buy</a> </figcaption> </figure> </div> </div> <div class="row"> <div class="col-sm-4"> <figure> <img src="https://picsum.photos/id/214/635/475" class="img-fluid" alt="img04"> <figcaption> <h3>Product 04</h3> <span>Yusuf</span> <a href="#">Buy</a> </figcaption> </figure> </div> <div class="col-sm-4"> <figure> <img src="https://picsum.photos/id/615/635/475" class="img-fluid" alt="img05"> <figcaption> <h3>Product 05</h3> <span>Yusuf</span> <a href="#">Buy</a> </figcaption> </figure> </div> <div class="col-sm-4"> <figure> <img src="https://picsum.photos/id/715/635/475" class="img-fluid" alt="img06"> <figcaption> <h3>Product 06</h3> <span>Yusuf</span> <a href="#">Buy</a> </figcaption> </figure> </div> </div> </div>

figure { margin: 0; position: relative; } figure img { max-width: 100%; display: block; position: relative; z-index: 10; -webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s; transition: transform 0.4s; } figure:hover img { -webkit-transform: scale(0.4); -moz-transform: scale(0.4); -ms-transform: scale(0.4); transform: scale(0.4); } figure:hover figcaption { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } figure a { position: absolute; bottom: 20px; right: 20px; } figcaption { position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 0; padding: 20px; background: #2c3f52; color: #ed4e6e; -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform 0.4s, opacity 0.4s; -moz-transition: -moz-transform 0.4s, opacity 0.4s; transition: transform 0.4s, opacity 0.4s; } figcaption h3 { margin: 0; padding: 0; color: #fff; } figcaption span:before { content: 'by '; } figcaption a { text-align: center; padding: 3px 25px; border-radius: 2px; display: inline-block; background: #ffc107; color: #fff; } figcaption a:hover { color: #fff; text-decoration: none; }