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;
}
