<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 ---------->
<section class="blog-sec">
<div class="container">
<div class="blog-header text-center ">
<h2 class="dark-text mb-4">Blogs</h2>
</div>
<div class="row g-0">
<div class="col-md-4">
<div class="blog_card_container">
<div class="card-image">
<img src="https://dummyimage.com/600x400/000/fff.png&text=Card" alt="blog Image">
</div>
<div class="card-body">
<h2>
Why is the sports cars so well designed?
</h2>
<p class="card-subtitle">
From the bustling streets of Kathmandu to the lively neighborhoods of New York City, authentic Nepali cuisine.
</p>
<p class="blog_card_link"><a href="#">Read More</a></p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="blog_card_container">
<div class="card-body">
<h2>
Why is the sports cars so well designed?
</h2>
<p class="card-subtitle">
While Nepalese and Indian cuisine share a lot of similarities, there are a few key differences that set them apart.
While Nepalese and Indian cuisine share a lot of similarities, there are a few key differences that set them apart.
While Nepalese and Indian cuisine share a lot of similarities, there are a few key differences that set them apart.
While Nepalese and Indian cuisine share a lot of similarities, there are a few key differences that set them apart.
</p>
<p class="blog_card_link"><a href="#">Read More</a></p>
</div>
<div class="card-image">
<img src="https://dummyimage.com/600x400/000/fff.png&text=Card" alt="blog Image">
</div>
</div>
</div>
<div class="col-md-4">
<div class="blog_card_container">
<div class="card-image">
<img src="https://dummyimage.com/600x400/000/fff.png&text=Card" alt="blog Image">
</div>
<div class="card-body">
<h2>
Why is the sports cars so well designed?
</h2>
<p class="card-subtitle">
Who doesn’t love Momos? It’s hard to resist these bite-sized dumplings! They are flavorful, cheap, and healthy!
</p>
<p class="blog_card_link"><a href="#">Read More</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="text-center mt-5">
<a href="#" class="common-btn"><span>View All</span></a>
</div>
</section>
.blog-sec{
padding: 60px 0;
}
.blog-link{
display: block;
position: relative;
}
.blog-link::after{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,1+100 */
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 60%;
opacity: 0.9;
content: "";
}
.blog-detail{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px;
z-index: 9;
}
.blog-detail h4{
font-family: 'Poppins', sans-serif;
font-size: 20px;
font-weight: 500;
color: #fff;
}
.blog-img{
overflow: hidden;
}
.blog-img img{
-webkit-transition: 0.5s;
transition: 0.5s;
}
.blog-link:hover .blog-img img{
transform: scale(1.1);
}
.blog_card_container {
border-radius: 0;
margin: auto;
overflow: hidden;
}
.blog_card_container .card-image img {
height: 260px;
width: 100%;
border-radius: 0 0 0 0;
background-size: cover;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.blog_card_container .card-body {
display: flex;
flex-direction: column;
align-items: start;
padding: 25px;
min-height: 200px;
}
.blog_card_container .card-body h2 {
font-size: 20px;
margin: 8px 0;
}
.blog_card_container .card-body p {
margin: 8px 0 0 0;
font-weight: 500;
font-size: 16px;
line-height: 30px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
color: #000;
}
p.blog_card_link a {
color: #d2ab50;
font-weight: 700;
text-transform: uppercase;
}
.blog_card_container .card-image {
width: 100%;
overflow: hidden;
}
.blog_card_container:hover img {
transform: scale(1.2);
}
.common-btn {
position: relative;
z-index: 5;
color: #000 !important;
font-family: 'Poppins', sans-serif;
font-weight: 600;
text-transform: capitalize;
display: inline-block;
vertical-align: middle;
align-items: center;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
border-radius: 4px;
border: 1px solid #d3b167;
//background: #d3b167;
background: linear-gradient(to bottom, rgba(212,174,75,1) 0%,rgba(242,235,131,1) 43%,rgba(242,235,131,1) 63%,rgba(192,158,61,1) 100%);
padding: 10px 25px 10px;
font-size: 16px;
letter-spacing: 1px;
padding: 10px 20px !important;
}
