Yes, an image can also be included on the ‘reveal’ side.
- When adding an image, in the text box just add the HTML for displaying an image, like:
<img src="/wp-content/uploads/image_back.jpg" />
- Add a new CSS class to your theme (e.g. find where additional CSS can be included in the customisation of its appearance). This is mainly to ensure that images are visible.
/* Flipping cards support for two images (front and back) */
div.whiteflip div.flipping-card-image:hover h2 {
transform: rotateY(0deg);
}
div.whiteflip div.flipping-card-image {
float: left;
position: relative;
background: #333;
}
div.whiteflip div.flipping-card-image img {
backface-visibility: visible;
transform: rotateY(0deg);
}
div.whiteflip div.flipping-card-image h2 {
padding:0;
width: 100%;
height: 100%;
}
- In the page/post (HTML source view) wrap the shortcode in a <div> tag:
<div class="whiteflip">
[flipping-card id=1]
</div>
I did this for some larger images as part of an online exhibition:
https://www.mhs.ox.ac.uk/backfromthedead/exhibition/myth-busting/
(Ideally I should make these images more responsive.)