Create a Flip Effect with jQuery to Show Images and Text

| Coding Tutorials
Easy Flip Effects with jQuery Flip Plugin

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.

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

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.

jQuery Flip Plugin

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

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

jQuery Flip Plugin

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


About the author

Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in our support forum.