Viewing 2 replies - 1 through 2 (of 2 total)
  • This would be a very useful (I would say essential) feature of this plugin. Also to be able to put the ‘text’ on side one!
    Not very impressive that you have not had a response yet!

    Yes, an image can also be included on the ‘reveal’ side.

    1. 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" />

    2. 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%;
      }
    3. 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.)

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘image on both sides of flip?’ is closed to new replies.