Foundation
Home

Hover Callout

By Rafi

F6

card callout hover control show hide interaction

How do I use This?

A card or callout hover interaction that reveals additional content. Can be used where space is limited or to create a surprise interaction.

HTML

<div class="callout callout-hover-reveal" data-callout-hover-reveal>
  <div class="callout-body">
    <h2>Hover me</h2>
    <p>I'll show you Bill Murray in the callout footer.</p>
  </div>
  <div class="callout-footer">
    <img src="https://fillmurray.com/300/200" alt="" />
  </div>
</div>

.callout-hover-reveal .callout-footer {
  display: none;
}

.callout-hover-reveal .callout-footer {
  display: none;
}

JS

$(function(){
$('[data-callout-hover-reveal]').hover(function(){
  $(this).find('.callout-footer').slideDown(250);
    },function(){
  $(this).find('.callout-footer').slideUp(250);
  });
})