Hover Dir

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

For more detail see, Hover Dir Documentation

Example

Website Design

Multipurpose HTML template
with bootstrap 4

UI/UX Design

Most user friendly user
interface design

Mobile Accessories

Popular mobile accessories
in 2019

Interior Photography

More than 50K happy
real state clients

App Development

Most secured and optimized
mobile app development

Content Writing

More than 50K blog posts
on different subjects

Packaging design

Beautiful packaging design
done by our designers

Model Photography

Exclusive model photography
by brilliant photographers

Digital Marketing

We spread digital products
all over the world

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

Javascript

<script src="assets/lib/hover-dir/jquery.hoverdir.js"></script>