We must admit, this is a pretty awesome shortcode. By now, most of you who are reading this have probably seen the traditional flip card. It uses many of the same CSS styles to create the effect; however, we wanted to take this concept a bit further.
These are what we like to call "parallax flip cards". We think they could be useful for many different sites but really could come in handy for photographers, interior designers, architects, artists, or any website that uses a lot of images. These provide a way to add additional content to your image that transcends the typical image overlay with text.
The idea behind these is pretty straightforward. We are going to have a wrapper class we call .flip-card. This wrapper will use the CSS3 properties transform-style: preserve-3d and perspective: 1000px. We will then add two separate children divs with classes .front and .back. Each of these will have a fair amount of CSS properties, but the most important is that they will have backface-visibility: hidden;, an absolute height, width: 100%;, background-size: cover;. The background image and the background-attachment can be styled in-line on your HTML elements.
We are then going to give each child div, .front and .back, a semi-transparent, black overlay so that we can place text on top of our background image. To accomplish this we are going to add the pseudo class ::after to each of our divs and give each a width of 100%, a height of 100%, an rgba background color, a position value of absolute, and set top, bottom, left, and right to 0. For the inner text div, we add some unique 3d transformations that we suggest you check out below.
For the jQuery, we are simply going to call our document.ready function and have our camera icon act as our event handler. Once the camera icon is clicked we are going to travel up the DOM tree until we find our parent class .flip and toggle the .hovered class. Simple enough.
Note: If you don't like the parallax effect on scroll but still want to maintain the illusion of 3d with your inner text, just change the CSS property from background-attachment: fixed; to background-attachment: scroll.
Flip Card - Left to Right
Click the camera icon to see the effect in action.