Create a Flip Effect with jQuery to Show Images and Text

Have you seen websites where photos of the staff members flip over? You hover your mouse over the picture of the staff member and the image flips over to reveal the staff member’s name.

Sounds difficult? Thanks to the jQuery Flip plugin and a bit of CSS, this effect is easy to achieve.

To create a flip animation with HTML, you need to create two containers: the front (visible) and the back (hidden), then apply a little CSS and Javascript.

Step #1. Download jQuery Flip plugin

Go to jQuery Flip plugin’s repository and click the “Download ZIP” button.

• Decompress the file.
• Look for the jquery.flip.min.js file.
• Upload the file to your site.

Step #2. The HTML

Use the example code below:

<div class="flip">
<div class="front">
<img src="path/to/image.jpg" alt="" />
</div>
<div class="back">
<h3>Some Text in the Back!</h3>
</div>
</div>

In the code above we defined these elements:

• flip container class. The class that we will call later in step 4.
• front container class. The image to display by default.
• back container class. The content to display when the flip happens.

Step #3. The CSS

Add the following CSS code to your site, in order to create up the end result:

.flip {
height: 199px;
width: 300px;
margin: 0 auto;
} .flip img {
width: 300px;
height: auto;
} .flip .back {
background: #2184cd;
color: #fff;
text-align: center;
}

Set custom width and height properties depending to your image size.

Step #4. The Javascript

Inside the head tag, load the code below in exactly the order below. Any such CMS such as WordPress, Joomla or Drupal will have plugins or modules that allow you to load additional scripts in the head of your page, often a page-specific basis.

jQuery:

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

jQuery Flip plugin:

<script src="/path/to/jquery.flip.min.js"></script>

Execute the plugin by giving a ‘hover’ value to the trigger option:

<script>
$(function(){
$(".flip").flip({
trigger: 'hover'
});
});
</script>

Open your site in a browser to see the end result. Put the cursor over the image to preview the horizontal flip effect.

To get a vertical flip effect, change the axis option to have an ‘x’ value.

<script>
$(function(){
$(".flip").flip({
trigger: 'hover',
axis: 'x'
});
});
</script>

To make the flip effect with a click, instead of a hover event, set the trigger values to ‘click’.

Step #5. The end result

Check out the demo here