Skip to main content

Hover cards

Hover cards are designed with various shades and shapes for different uses.

Default hover​

Hover card

CategoryLorem ipsum dolor sit amet consectetur.

<div class="card card-hover">
  <div class="card-image">
    <img src="..." alt="..." />
  </div>
  <div class="card-content">...</div>
</div>

Card image hover​

Hover card

CategoryLorem ipsum dolor sit amet consectetur.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aliquid, aut consequatur cumque...

Read more...
<div class="card card-hover">
  <div class="card-image">
    <img src="..." alt="..." />
  </div>
  <div class="card-content">...</div>
</div>

Animated hover card​

Hover card

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aliquid, aut consequatur cumque...

Read more...
<div className="card card-animated-hover">
  <div className="card-image">
    <img src="..." alt="..." />
  </div>
  <div className="card-content">
    <h4 className="card-title">...</h4>
    <p>...</p>
    <a href="#" className="link white">
      ...
    </a>
  </div>
</div>