Gallery - Blocks

Gallery images must be wrapped inside .row .gallery-wrapper element.

Basic Lightbox Gallery:


<div class="container">
  <div class="row g-4 gallery-wrapper border-radius">
    <div class="col-12 col-md-4 gallery-box">
      <div class="gallery-img">
        <a href="../assets/images/img-1.jpg" data-gallery-title="Gallery Image 1">
          <img src="../assets/images/img-1.jpg" alt="">
        </a>
      </div>
    </div>
    <div class="col-12 col-md-4 gallery-box">
      <div class="gallery-img">
        <a href="../assets/images/img-2.jpg" data-gallery-title="Gallery Image 2">
          <img src="../assets/images/img-2.jpg" alt="">
        </a>
      </div>
    </div>
    <div class="col-12 col-md-4 gallery-box">
      <div class="gallery-img">
        <a href="../assets/images/img-3.jpg" data-gallery-title="Gallery Image 3">
          <img src="../assets/images/img-3.jpg" alt="">
        </a>
      </div>
    </div>
  </div><!-- end row -->
</div><!-- end container -->

Hover Style 2

The hover style can be changed by adding hover-style-2 class to .gallery-wrapper element.


<div class="container">
  <div class="row g-4 gallery-wrapper hover-style-2 border-radius">
    <div class="col-12 col-md-4 gallery-box">
      <div class="gallery-img">
        <a href="../assets/images/img-1.jpg" data-gallery-title="Gallery Image 1">
          <img src="../assets/images/img-1.jpg" alt="">
        </a>
      </div>
    </div>
    <div class="col-12 col-md-4 gallery-box">
      <div class="gallery-img">
        <a href="../assets/images/img-2.jpg" data-gallery-title="Gallery Image 2">
          <img src="../assets/images/img-2.jpg" alt="">
        </a>
      </div>
    </div>
    <div class="col-12 col-md-4 gallery-box">
      <div class="gallery-img">
        <a href="../assets/images/img-3.jpg" data-gallery-title="Gallery Image 3">
          <img src="../assets/images/img-3.jpg" alt="">
        </a>
      </div>
    </div>
  </div><!-- end row -->
</div><!-- end container -->