October 17, 2021

Bootstrap categories snippets image over zoom

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

 

Leave a Reply

Your email address will not be published. Required fields are marked *