Card 4 Product Style01

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 4 and CCS3 Product Cards with Transition  | par NGLESSON</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Mezgani said">
  <meta name="copyright" content="NGLESSON">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
	<div class="row mt-5 mb-5" id="ads">
    <!-- Category Card -->
    <div class="col-lg-6 col-md-6 col-sm-6 col-12 mb-5">
        <div class="card rounded">
            <div class="card-image">
                <span class="card-notify-badge">ESSENCE</span>
                <span class="card-notify-year">Sales</span>
                <img class="img-responsive img-fluid" src="https://imageonthefly.autodatadirect.com/images/?USER=eDealer&PW=edealer872&IMG=USC80HOC011A021001.jpg&width=440&height=262" alt="Alternate Text" />
            </div>
            <div class="card-image-overlay m-auto">
                <span class="card-detail-badge">Used</span>
                <span class="card-detail-badge">$28,000.00</span>
                <span class="card-detail-badge">13000 Kms</span>
            </div>
            <div class="card-body text-center">
                <div class="ad-title m-auto">
                    <h5>Honda Accord LX</h5>
                </div>
                <a class="ad-btn" href="#">View</a>
            </div>
        </div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-12 mb-5">
        <div class="card rounded">
            <div class="card-image">
                <span class="card-notify-badge">ESSENCE</span>
                <span class="card-notify-year">Sales</span>
                <img class="img-responsive img-fluid" src="https://imageonthefly.autodatadirect.com/images/?USER=eDealer&PW=edealer872&IMG=CAC80HOC021B121001.jpg&width=440&height=262" alt="Alternate Text" />
            </div>
            <div class="card-image-overlay m-auto">
                <span class="card-detail-badge">Used</span>
                <span class="card-detail-badge">$28,000.00</span>
                <span class="card-detail-badge">13000 Kms</span>
            </div>
            <div class="card-body text-center">
                <div class="ad-title m-auto">
                    <h5>Honda CIVIC HATCHBACK LS</h5>
                </div>
                <a class="ad-btn" href="#">View</a>
            </div>
        </div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-12 mb-5">
        <div class="card rounded">
            <div class="card-image">
                <span class="card-notify-badge">ESSENCE</span>
                <span class="card-notify-year">Sales</span>
                <img class="img-responsive img-fluid" src="https://imageonthefly.autodatadirect.com/images/?USER=eDealer&PW=edealer872&IMG=USC80HOC091A021001.jpg&width=440&height=262" alt="Alternate Text" />
            </div>
            <div class="card-image-overlay m-auto">
                <span class="card-detail-badge">Used</span>
                <span class="card-detail-badge">$22,000.00</span>
                <span class="card-detail-badge">8000 Kms</span>
            </div>
            <div class="card-body text-center">
                <div class="ad-title m-auto">
                    <h5>Honda Accord Hybrid LT</h5>
                </div>
                <a class="ad-btn" href="#">View</a>
            </div>
        </div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-12 mb-5">
        <div class="card rounded">
            <div class="card-image">
                <span class="card-notify-badge">DIESEL</span>
                <span class="card-notify-year">Sales</span>
                <img class="img-responsive img-fluid" src="https://imageonthefly.autodatadirect.com/images/?USER=eDealer&PW=edealer872&IMG=USC80HOC091A021001.jpg&width=440&height=262" alt="Alternate Text" />
            </div>
            <div class="card-image-overlay m-auto">
                <span class="card-detail-badge">Used</span>
                <span class="card-detail-badge">$22,000.00</span>
                <span class="card-detail-badge">8000 Kms</span>
            </div>
            <div class="card-body text-center">
                <div class="ad-title m-auto">
                    <h5>Honda Accord Hybrid LT</h5>
                </div>
                <a class="ad-btn" href="#">View</a>
            </div>
        </div>
    </div>
</div>
</div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>  
</body>
</html>

#ads {
    /* margin: 30px 0 30px 0;*/
    
 }
 
 #ads .card-notify-badge {
         position: absolute;
         left: -10px;
         top: -20px;
         background: #f2d900;
         text-align: center;
         border-radius: 30px 30px 30px 30px; 
         color: #000;
         padding: 5px 10px;
         font-size: 14px;
 
     }
 
 #ads .card-notify-year {
         position: absolute;
         right: -10px;
         top: -20px;
         background: #ff4444;
         border-radius: 50%;
         text-align: center;
         color: #fff;      
         font-size: 14px;      
         width: 50px;
         height: 50px;    
         padding: 15px 0 0 0;
 }
 
 
 #ads .card-detail-badge {      
         background: #f2d900;
         text-align: center;
         border-radius: 30px 30px 30px 30px;
         color: #000;
         padding: 5px 10px;
         font-size: 14px;        
     }
 
    
 
 #ads .card:hover {
             background: #fff;
             box-shadow: 1px 15px 25px 8px rgba(46,61,73,0.15);
             border-radius: 4px;
             transition: all 0.3s ease;
         }
 
 #ads .card-image-overlay {
         font-size: 20px;
         
     }
 
 
 #ads .card-image-overlay span {
             display: inline-block;              
         }
 
 
 #ads .ad-btn {
         text-transform: uppercase;
         width: 150px;
         height: 40px;
         border-radius: 80px;
         font-size: 16px;
         line-height: 35px;
         text-align: center;
         border: 3px solid #e6de08;
         display: block;
         text-decoration: none;
         margin: 20px auto 1px auto;
         color: #000;
         overflow: hidden;        
         position: relative;
         background-color: #e6de08;
     }
 
 #ads .ad-btn:hover {
             background-color: #e6de08;
             color: #1e1717;
             border: 2px solid #e6de08;
             background: transparent;
             transition: all 0.3s ease;
             box-shadow: 12px 15px 20px 0px rgba(46,61,73,0.15);
         }
 
 #ads .ad-title h5 {
         text-transform: uppercase;
         font-size: 18px;
     }