Bootstrap snippets category list

<div class="container">
       <div class="row categ-List">
           <div class="col-lg-4 col-md-6">
               <div class="categ">
                   <img src="https://images.pexels.com/photos/845434/pexels-photo-845434.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
                   <div class="info">
                       <h6>New in:</h6>
                       <h4>Clothing</h4>
                   </div>
               </div>
           </div>
           <div class="col-lg-4 col-md-6">
               <div class="categ">
                   <img src="https://images.pexels.com/photos/1126993/pexels-photo-1126993.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
                   <div class="info">
                           <h6>Clearance sales:</h6>
                           <h4>Clothing <a href="">20% Off</a></h4>
                       </div>
               </div>
           </div>
           <div class="col-lg-4 col-md-6 offset-md-3 offset-lg-0 offseet-xl-0">
               <div class="categ">
                   <img src="https://images.pexels.com/photos/794064/pexels-photo-794064.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
                   <div class="info">
                           <h6>Upcoming sales:</h6>
                           <h4>Get up to <a href="">70% Off</a></h4>
                       </div>
               </div>
           </div>
       </div>
   </div>

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
        <style>
.categ-List .col-lg-4 { padding: 5px;}
.categ img { width: 100%; cursor: pointer;}            
.info { position: absolute; width: 100%; text-align: center; transform: translateY(100%);  top: 0; background: #fffffff2;
  max-width: 80%;  margin: 0% 10%; cursor: pointer; border-radius: 5px; padding: 15px 0px; transition: all .5s; }
.categ { position: relative; }
.categ:hover .info { border-radius: 50px;  max-width:90%; margin: 0% 5%; }
.info h6 { margin: 0; padding: 0; text-transform: uppercase;}
.info h4 { margin: 0; padding: 0; font-weight: 600; font-size: 22px; line-height: 1.6;}
        </style>