Complete Venobox Gallery 2 With CSS Effect

 

ADD VENOBOX LIBRARY

  // Initiate venobox lightbox
  $(document).ready(function() {
    $('.venobox').venobox();
  }); 

 <link href="venobox/venobox.css" rel="stylesheet">

<script src="venobox/venobox.min.js"></script>

<!-- ======= Gallery Section ======= -->
    <section id="gallery" class="gallery">

      <div class="container" data-aos="fade-up">
        <div class="section-title">
          <h2>Gallery</h2>
          <p>Our Restaurant</p>
        </div>
      </div>

      <div class="container-fluid" data-aos="fade-up" data-aos-delay="100">

        <div class="row no-gutters">

          <div class="col-lg-3 col-md-4">
            <div class="gallery-item">
              <a href=" img/gallery/gallery-1.jpg" class="venobox" data-gall="gallery-item">
                <img src=" img/gallery/gallery-1.jpg" alt="" class="img-fluid">
              </a>
            </div>
          </div>

          <div class="col-lg-3 col-md-4">
            <div class="gallery-item">
              <a href=" img/gallery/gallery-2.jpg" class="venobox" data-gall="gallery-item">
                <img src=" img/gallery/gallery-2.jpg" alt="" class="img-fluid">
              </a>
            </div>
          </div>

          <div class="col-lg-3 col-md-4">
            <div class="gallery-item">
              <a href=" img/gallery/gallery-3.jpg" class="venobox" data-gall="gallery-item">
                <img src=" img/gallery/gallery-3.jpg" alt="" class="img-fluid">
              </a>
            </div>
          </div>

          <div class="col-lg-3 col-md-4">
            <div class="gallery-item">
              <a href=" img/gallery/gallery-4.jpg" class="venobox" data-gall="gallery-item">
                <img src=" img/gallery/gallery-4.jpg" alt="" class="img-fluid">
              </a>
            </div>
          </div>

          <div class="col-lg-3 col-md-4">
            <div class="gallery-item">
              <a href=" img/gallery/gallery-5.jpg" class="venobox" data-gall="gallery-item">
                <img src=" img/gallery/gallery-5.jpg" alt="" class="img-fluid">
              </a>
            </div>
          </div>

          <div class="col-lg-3 col-md-4">
            <div class="gallery-item">
              <a href=" img/gallery/gallery-6.jpg" class="venobox" data-gall="gallery-item">
                <img src=" img/gallery/gallery-6.jpg" alt="" class="img-fluid">
              </a>
            </div>
          </div>

          <div class="col-lg-3 col-md-4">
            <div class="gallery-item">
              <a href=" img/gallery/gallery-7.jpg" class="venobox" data-gall="gallery-item">
                <img src=" img/gallery/gallery-7.jpg" alt="" class="img-fluid">
              </a>
            </div>
          </div>

          <div class="col-lg-3 col-md-4">
            <div class="gallery-item">
              <a href=" img/gallery/gallery-8.jpg" class="venobox" data-gall="gallery-item">
                <img src=" img/gallery/gallery-8.jpg" alt="" class="img-fluid">
              </a>
            </div>
          </div>

        </div>

      </div>
    </section><!-- End Gallery Section -->

 

-----------------------------CSS ---------------------------

 

.gallery .gallery-item {
  overflow: hidden;
  border-right: 3px solid #454035;
  border-bottom: 3px solid #454035;
}

.gallery .gallery-item img {
  transition: all ease-in-out 0.4s;
}

.gallery .gallery-item:hover img {
  transform: scale(1.1);
}