Birdhouse Websites and Designs

Moving Your Business ONLINE?

Contact Us Today!

The Goal:
When an image is clicked on, it flips over to reveal different content (ie: text, another image, etc.).

I like to use this for displaying company logos, or hiding content that might not need to take up space unless interacted with.

Requirements:

  • HTML & CSS
  • jQuery

Before

After

HTML Markup

Add this to your html.

<div class="card-grid">
  <div class="flip-btn">
    <div class="front">
      <img src="/wp-content/uploads/front.jpg" alt="card front" />
    </div>
  </div>

  <div class="unflip-btn">
    <div class="back">
      <img src="/wp-content/uploads/back.jpg" alt="card back" />
    </div>
  </div>
</div>

CSS Styles

Add this to your stylesheet.

/* Card Flips */
.front {
    background: white;
}
.front img:hover {
    opacity: 0.7;
    cursor: pointer;
}
.back {
    padding: 20px;
    background: white;
    cursor: pointer;
}
.home .back {
    padding: 85px 65px 25px 0;
    background: white;
    cursor: pointer;
}
.unflip-btn p {
    font-size: 14px;
    line-height: 19px;
}

jQuery

Add this to your custom scripts. Make sure you have jQuery installed.

jQuery(document).ready(function($) {
    $(".card-grid").flip({
        trigger: 'manual'
    });
    $(".flip-btn").click(function(){       
        $(this).closest(".card-grid").flip(true);
    });
    $(".unflip-btn").click(function(){     
        $(this).closest(".card-grid").flip(false);
    });
});
%d bloggers like this: