<section class="category-products-area pb-60">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-12">
<div class="single-category-box">
<img src="https://www.tolmatol.com/uploads-images/bootstrap-categories-snippets-image-over-zoom/img-1.jpg" alt="">
<div class="category-content">
<h3>Our Popular Products</h3>
<a href="#" class="btn btn-outline-light">View More</a>
</div>
<a href="#" class="link-btn"></a>
</div>
</div>
<div class="col-lg-8 col-md-12">
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="single-category-box">
<img src="https://www.tolmatol.com/uploads-images/bootstrap-categories-snippets-image-over-zoom/img-2.jpg" alt="image">
<div class="category-content">
<h3>Winter Collections</h3>
</div>
<a href="#" class="link-btn"></a>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="single-category-box">
<img src="img-3.jpg" alt="image">
<div class="category-content">
<h3>Summer Collections</h3>
</div>
<a href="#" class="link-btn"></a>
</div>
</div>
<div class="col-lg-12 col-md-12">
<div class="single-category-box">
<img src="https://www.tolmatol.com/uploads-images/bootstrap-categories-snippets-image-over-zoom/img-4.jpg" alt="image">
<div class="category-content">
<h3>Up to 75% OFF Spring Sale!</h3>
</div>
<a href="#" class="link-btn"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<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>
<style>
.category-products-area {
padding-bottom: 30px;
}
.category-products-area.pt-60 {
padding-bottom: 0;
margin-bottom: -30px;
}
.single-category-box img { width:100%}
.single-category-box {
margin-bottom: 30px;
position: relative;
text-align: center;
overflow: hidden;
}
.single-category-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #222222;
-webkit-transition: 0.5s;
transition: 0.5s;
opacity: .45;
z-index: 2;
}
.single-category-box img {
-webkit-transition: 0.5s;
transition: 0.5s;
}
.single-category-box .category-content {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
margin: 0 auto;
z-index: 3;
}
.single-category-box .category-content h3 {
margin-bottom: 0;
color: #ffffff;
font-size: 20px;
font-weight: 700;
}
.single-category-box .category-content .btn {
margin-top: 22px;
}
.single-category-box .link-btn {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3;
}
.single-category-box:hover img, .single-category-box:focus img {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
</style>