************** Note that if you need links (such as emails or links to pages or other websites) use the following javascript instead of the above more simple javascript that treats the entire front and back of the cards as the trigger. You'll need to add a new trigger element (called "readMore" in the javascript below inside BOTH classes "front" and "back") in your html, but that should be the only change required to make this work. Just don't change the structure on either the front or back,

e.g. html
other stuff but make sure to include
my button maybe?
other stuff but make sure to include
my button maybe?

***************************** END Note that if you need links on either the front or back

BEGIN: TO MAKE THE CARD FLIP ON HOVER AND FLIP BACK OVER WHEN THE USER MOUSES OUT FROM THE BACK USE THIS SCRIPT INSTAED OF ANY OF THE JAVASCRIPT ABOVE: For this to work properly, make front and back of card the same width in your css. IMPORTANT NOTE: THERE IS AN ISSUE WITH THE HOVER ANIMATION IN THAT THE ANIMATION WILL COMPLETE IF THE MOUSE QUICKLY RUNS ACROSS THE ELEMENT TO BE ANIMATED. THE CARD WILL THEN NOT FLIP OVER EVEN THOUGH THE MOUSE OFF THE ELEMENT. FOR A POSSIBLE SOLUTIN INVOLVED A LARGE REWORKD SEE: https://stackoverflow.com/questions/7786873/stop-hover-animation-when-the-mouse-leaves-in-jquery USING THE QUERY STOP() FUNCTION. you may also wish to try a css only fix, like this one: https://codepen.io/edeesims/pen/wvpYWW (but behviours are unpredicateable with varying content). Here's another solution that seems to work (but requires complete rewrite: https://www.jqueryscript.net/animation/Create-3D-Card-Flip-Effects-On-Hover-Using-jQuery-CSS3.html END: TO MAKE THE CARD FLIP ON HOVER AND FLIP BACK OVER WHEN THE USER MOUSES OUT FROM THE BACK USE THIS SCRIPT INSTAED OF ANY OF THE JAVASCRIPT ABOVE:

CARD FLIP ANIMATION

Note that this is for when there is more text on back than on front, which--without the additions to the code--creates huge problems for pushing OTHER adjacent content down due to absolute positoning of the back content. We solve this by toggling front and back from absolute to relative to force content to push down. (see CSS)
Your short text here.
Your text here. Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero. Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly.
Your short text here.
Your text here. Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text. It's a convenient tool for mock-ups. It helps to outline the visual elements of a document or presentation, eg typography, font, or layout. Lorem ipsum is mostly a part of a Latin text by the classical author and philosopher Cicero. Its words and letters have been changed by addition or removal, so to deliberately render its content nonsensical; it's not genuine, correct, or comprehensible Latin anymore. While lorem ipsum's still resembles classical Latin, it actually has no meaning whatsoever. As Cicero's text doesn't contain the letters K, W, or Z, alien to latin, these, and others are often inserted randomly.

Click on the boxes above to make them flip like a card.

Follow these steps to implement this animation:

1. For Jquery:

a) Make sure a link to the Jquery library is included on your site or page (our theme already includes this) BEFORE any JQuery code.

b) If you want to put the jQuery code into an html page, wrap the code below in script tags and insert it into the page. Or insert the following code into an external .js file and call that file on your site/page. (Our theme already calls it's scripts.js file in the footer.)

  
            jQuery( document ).ready(function() {
                 jQuery(".cardFlipContainer .cardFlipTrigger").click(function(){
                 jQuery(this).toggleClass("flipped");
                 });
            }); 
            
            
//You can remove the outer jQuery( document ).ready(function() { wrapper if inserting into a previosuly exisitng document ready function.

For CSS:


        .displayFlex {
            display: flex; /*if using in our theme, you can remove this declaration as it is alrady in style.css. You can also remove this if your using only one card flip animation by itself on a row*/
        }
        .cardFlipContainer {
            perspective: 800px; 
            flex: 1;
            /*"flex: 1;" can be removed if you are using only one card flip animation by itself on a row*/
        }
        .cardFlipTrigger {
            transition: transform 1s; 
            transform-style: preserve-3d; 
            transform-origin: 50% 50%;
            margin: 0 40px;
            /*adjust margin about as required*/
        }
        .cardFlipTrigger .front {
            position: relative;
             -webkit-backface-visibility: hidden;  /* Safari  still needs this in 2020!*/
            backface-visibility: hidden;
            cursor: pointer;
            padding: 40px;
            background: #00ceff;
            color: white;
            /*adjust padding, background and color as needed*/
         }
        .cardFlipTrigger .back {
            position: absolute; 
            top: 50%;
            transform: rotateY( 180deg ) translateY(-50%);
             -webkit-backface-visibility: hidden;  /* Safari  still needs this in 2020!*/
            backface-visibility: hidden;
            box-sizing: border-box;
            cursor: pointer;
            background: #ff8300;
            padding: 40px;
            /*adjust padding, background and color as needed*/
        }
        .cardFlipTrigger.flipped {
            /*class "flipped" toggled by Juery in js/scripts.js*/
            transform: rotateY( 180deg );
        }
        



NOTES:


i) On the html element "cardFlipContainer" perspective: 800px; enables the 3D effect on flip.  "800" can be any positive integer (with "px" only).  The lower the number the greater the 3D effect. Must be on the PARENT of the item that TRIGGERS the animation.


i) On the html element "cardFlipTrigger" transition: transform 1s; "transition" means that on this element's change-of-state (i.e. when Jquery adds the class "flipped" to "cardFlipTrigger") the transform defined in the "flipped" class is performed.  "1s" is how much time that transition should take and may be adjusted to any positive number (in seconds ("s") or milliseconds ("ms"). transform-style: preserve-3d; allows the content of the children html elements "front" and "back" to correctly orient itself on flipping (otherwise text appears as a mirror image on flipping). transform-origin: 50% 50%;  defines the transform origin for the amimation.  We want this anaimation to tranform in the middle with 50% 50%.  See the css spec for other possible settings.


iii) for html elements "front" and "back" (both siblings inside "cardFlipTrigger html parent element) backface-visibility: hidden; determines whether or not the back face of its SIBLING element is visible when facing the user. The back face of any two siblings defaults to a transparent background, meaning that the content of "front" would show through when the content of "back" was showing (and vice versa). To prevent this, we set backface visibility to "hidden" on both siblings. Note also that position: absolute; set on the "back" html element prevents the "front" (set to "position: relative" element from pushing "back" content down by default.


iv) On html elments "flipped" and "back" transform: rotateY( 180deg ); Defines the transformation, where "(180deg) can take any integer (even beyond 360) in "deg".  "rotateY" can be changed to "rotateX" so that the animation occurs on the X-axis instead. For a fuller explanation of how this animation works, see the end of section "3" below.

3. For the HTML (in white only, below):


        <div class="displayFlex alignItemsCenter">
            <div class="cardFlipContainer flexItem">
              <div class="cardFlipTrigger">
                <div class="front">Your front content here.</div>
                <div class="back">Your back content here.</div>
              </div>
            </div>
              <div class="cardFlipTrigger">
                <div class="front">Your front content here.</div>
                <div class="back">Your back content here. </div>
              </div>
          </div>
          
          
NOTE: The "div class="displayFlex alignItemsCenter" wraper and its ending div and any "flexItem" classes may be removed if flex is not or if you dont' need two or more card flips on the same line.

          
Basically how the flip works is that the class "back"--which is the class attribute for the content on the back of the card-- is rotated by 180 degrees, which makes it not show, so the "front" html element shows by it's default CSS.  Then, on the first click, Jquery adds the class "flipped" to the PARENT element ("cardFlipTrigger") which causes the entire parent element ITSELF to rotate 180 degreees, thereby exposing the "back" (that was itself roated by 180 degrees initally to hide it) and hiding the "front" element.  On the second click, the "flipped" class is removed, so the PARENT ("cardFlipTrigger") is not longer rotaed 180 degrees, so the "back" html elment no longer shows (because it is roated 180 degrees by default) but the "front" element now shows again.