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.

[cc lang=”html”]

card front

card back

[/cc]

CSS Styles

Add this to your stylesheet.

[cc lang=”css”]
/* 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;
}
[/cc]

jQuery

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

[cc lang=”javascript”]
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);
});
});
[/cc]
Share This