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”]
[/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]
/* 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]
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]