Hover Box

Hoverbox 1 - Center

Heading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.


<div class="hoverbox-1 text-center border-radius">
  <img src="../assets/images/col-2.jpg" alt="">
  <div class="hover-content center">
    <h5>Heading</h5>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
  </div>
</div>

Hoverbox 1 - Bottom

Heading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.


<div class="hoverbox-1 border-radius">
  <img src="../assets/images/col-2.jpg" alt="">
  <div class="hover-content bottom">
    <h5>Heading</h5>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
  </div>
</div>

Hoverbox 2

Heading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.


<div class="hoverbox-2 text-center">
  <img src="../assets/images/col-2.jpg" alt="">
  <div class="hover-content">
    <h5>Heading</h5>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
  </div>
</div>

Hoverbox 3

Heading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.


<div class="hoverbox-3">
  <img src="../assets/images/col-2.jpg" alt="">
  <div class="hover-content">
    <h5>Heading</h5>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
  </div>
</div>

Hoverbox 4 - Center

Heading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Learn More 

<div class="hoverbox-4 center text-center border-radius">
  <img src="../assets/images/col-2.jpg" alt="">
  <div class="content">
    <h5>Heading</h5>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
  </div>
  <div class="hover-content">
    <a class="button button-lg button-outline-white-2 button-rounded" href="#">Learn More</a>
  </div>
</div>

Hoverbox 4 - Bottom

Heading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Learn More 

<div class="hoverbox-4 bottom border-radius">
  <img src="../assets/images/col-2.jpg" alt="">
  <div class="content">
    <h5>Heading</h5>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
  </div>
  <div class="hover-content">
    <a class="button button-lg button-outline-white-2 button-rounded" href="#">Learn More</a>
  </div>
</div>

Hoverbox 5

Heading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Learn More 

<div class="hoverbox-5 border-radius">
  <img src="../assets/images/col-2.jpg" alt="">
  <div class="content">
    <h5>Heading</h5>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
  </div>
  <div class="hover-content">
    <a class="button button-lg button-outline-white-2 button-rounded" href="#">Learn More</a>
  </div>
</div>

Hoverbox 6 - Top

Title 

<div class="hoverbox-6">
  <a href="#">
    <img src="../assets/images/col-2.jpg" alt="">
    <div class="content top">
      <span class="font-family-tertiary font-small fw-normal uppercase m-0">Title</span>
    </div>
  </a>
</div>

Hoverbox 6 - Center

Title 

<div class="hoverbox-6">
  <a href="#">
    <img src="../assets/images/col-2.jpg" alt="">
    <div class="content center">
      <span class="font-family-tertiary font-small fw-normal uppercase m-0">Title</span>
    </div>
  </a>
</div>

Hoverbox 6 - Bottom

Title 

<div class="hoverbox-6">
  <a href="#">
    <img src="../assets/images/col-2.jpg" alt="">
    <div class="content bottom">
      <span class="font-family-tertiary font-small fw-normal uppercase m-0">Title</span>
    </div>
  </a>
</div>

Hoverbox 7

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.


<div class="hoverbox-7">
  <img src="../assets/images/col-2.jpg" alt="">
  <div class="hover-content">
    <div class="top">
      <ul class="list-inline-sm">
        <li>
          <a class="button-circle button-circle-sm button-circle-white" href="#"><i class="bi bi-facebook"></i></a>
        </li>
        <li>
          <a class="button-circle button-circle-sm button-circle-white" href="#"><i class="bi bi-twitter-x"></i></a>
        </li>
      </ul>
    </div>
    <div class="bottom">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
    </div>
  </div>
</div>