Hover dir

These modular elements can be readily used and customized in every layout across pages.

For more detail see, Hover Dir Documentation

Example
<div class="row g-3">
  <div class="col-sm-6 col-lg-4">
    <div class="hoverdir-item my-0">
      <div class="hoverdir-item-content"><a href="../pages/single-post.html"><img class="img-fluid rounded" src="../assets/img/projects/1.jpg" alt="" />
          <div class="hoverdir-text">
            <h3 class="text-white lh-1 fs-0">Website Design</h3>
            <p class="ls-1 mb-0 text-700">Multipurpose HTML template<br class="d-sm-none d-md-block" /> with bootstrap 5</p>
          </div>
        </a></div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-4">
    <div class="hoverdir-item my-0">
      <div class="hoverdir-item-content"><a href="../pages/single-post.html"><img class="img-fluid rounded" src="../assets/img/projects/2.jpg" alt="" />
          <div class="hoverdir-text">
            <h3 class="text-white lh-1 fs-0">UI/UX Design</h3>
            <p class="ls-1 mb-0 text-700">Most user friendly user<br class="d-sm-none d-md-block" /> interface design </p>
          </div>
        </a></div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-4">
    <div class="hoverdir-item my-0">
      <div class="hoverdir-item-content"><a href="../pages/single-post.html"><img class="img-fluid rounded" src="../assets/img/projects/3.jpg" alt="" />
          <div class="hoverdir-text">
            <h3 class="text-white lh-1 fs-0">Mobile Accessories</h3>
            <p class="ls-1 mb-0 text-700">Popular mobile accessories<br class="d-sm-none d-md-block" /> in 2021</p>
          </div>
        </a></div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-4">
    <div class="hoverdir-item my-0">
      <div class="hoverdir-item-content"><a href="../pages/single-post.html"><img class="img-fluid rounded" src="../assets/img/projects/4.jpg" alt="" />
          <div class="hoverdir-text">
            <h3 class="text-white lh-1 fs-0">Interior Photography</h3>
            <p class="ls-1 mb-0 text-700">More than 50K happy<br class="d-sm-none d-md-block" /> real state clients </p>
          </div>
        </a></div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-4">
    <div class="hoverdir-item my-0">
      <div class="hoverdir-item-content"><a href="../pages/single-post.html"><img class="img-fluid rounded" src="../assets/img/projects/5.jpg" alt="" />
          <div class="hoverdir-text">
            <h3 class="text-white lh-1 fs-0">App Development</h3>
            <p class="ls-1 mb-0 text-700">Most secured and optimized<br class="d-sm-none d-md-block" /> mobile app development </p>
          </div>
        </a></div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-4">
    <div class="hoverdir-item my-0">
      <div class="hoverdir-item-content"><a href="../pages/single-post.html"><img class="img-fluid rounded" src="../assets/img/projects/6.jpg" alt="" />
          <div class="hoverdir-text">
            <h3 class="text-white lh-1 fs-0">Content Writing</h3>
            <p class="ls-1 mb-0 text-700">More than 50K blog posts <br class="d-sm-none d-md-block" /> on different subjects</p>
          </div>
        </a></div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-4">
    <div class="hoverdir-item my-0">
      <div class="hoverdir-item-content"><a href="../pages/single-post.html"><img class="img-fluid rounded" src="../assets/img/projects/7.jpg" alt="" />
          <div class="hoverdir-text">
            <h3 class="text-white lh-1 fs-0">Packaging design</h3>
            <p class="ls-1 mb-0 text-700">Beautiful packaging design <br class="d-sm-none d-md-block" />done by our designers </p>
          </div>
        </a></div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-4">
    <div class="hoverdir-item my-0">
      <div class="hoverdir-item-content"><a href="../pages/single-post.html"><img class="img-fluid rounded" src="../assets/img/projects/8.jpg" alt="" />
          <div class="hoverdir-text">
            <h3 class="text-white lh-1 fs-0">Model Photography</h3>
            <p class="ls-1 mb-0 text-700">Exclusive model photography <br class="d-sm-none d-md-block" />by brilliant photographers</p>
          </div>
        </a></div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-4">
    <div class="hoverdir-item my-0">
      <div class="hoverdir-item-content"><a href="../pages/single-post.html"><img class="img-fluid rounded" src="../assets/img/projects/9.jpg" alt="" />
          <div class="hoverdir-text">
            <h3 class="text-white lh-1 fs-0">Digital Marketing</h3>
            <p class="ls-1 mb-0 text-700">We spread digital products<br class="d-sm-none d-md-block" /> all over the world </p>
          </div>
        </a></div>
    </div>
  </div>
</div>
Javascript
<script src="assets/lib/hover-dir/jquery.hoverdir.js"></script>