New

Hover lift

Add .hover-lift, or .hover-lift-light to any element to add a lift hovering effect with its respective shadow.

Subscribe now Sign up for free
<a href="#" class="btn btn-success hover-lift-light">
  Subscribe now
  <i class="fas fa-chevron-right fa-xs ml-2"></i>
</a>

<a href="#" class="btn btn-purple hover-lift">
  Sign up for free
  <i class="fas fa-chevron-right fa-xs ml-2"></i>
</a>

Hover mask

A set of utilities that on hover scales up the background and shows the underlying content.

.hover-mask the main wrapper.

.hover-mask-image to set the background picture.

.hover-mask-content the empty container where you can add any content with any style.

.hover-mask-content-up effect for content to appear from top to bottom.

.hover-mask-content-down effect for content to appear from bottom to top.

Hover content title

Hover content

See project
<a href="#" class="hover-mask h-300">
  <span class="hover-mask-image" style="background-image:url('../assets/img/unsplash/56.jpeg');"></span>

  <span class="hover-mask-content d-flex justify-content-center align-items-center overlay overlay-white overlay-90">
    <span class="position-relative text-center">
      <h3 class="hover-mask-content-up">Hover content title</h3>
      <p class="hover-mask-content-up">Hover content</p>
      <span class="hover-mask-content-down btn btn-warning">See project</span>
    </span>
  </span>
</a>