گالری - بلوک ها

تصاویر گالری باید درون عنصر .row .gallery-wrapper پیچیده شوند.

گالری لایت باکس پایه:


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

هاور استایل 2

هاور استایل را می توان با افزودن کلاس hover-style-2 به تغییر داد. عنصر gallery-wrapper.


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