Create a Flip Effect with jQuery to Show Images and Text

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 class="back">
<h3>Some Text in the Back!</h3>

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.


<script src=""></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:

trigger: 'hover'

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.

trigger: 'hover',
axis: 'x'
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


  • Valentin Garcia

    Valentin discovered Joomla in 2010, and since then he has considered it as the best CMS. Valentin has been coding extensions and templates for Joomla for many years and truly enjoys helping people build their own websites with Open Source tools. He lives in San Julián, Jalisco, México.

0 0 votes
Blog Rating
Notify of
Newest Most Voted
Inline Feedbacks
View all comments

Hello, very good!! Thanks!


Hey @carosouza 🙂


The demo behaves a little strangely on touch devices. When I touch an image, it rotates and stays rotated. Then when I touch the other image, the first image rotates back around to the front. Is it possible to make them work with “hover” on non-touch devices but show the back only while the image is being touched on touch devices?


Hi @SSteve ,
To provide touch support, take a look to developers docs in trigger attribute in “Options” section: [url=]…[/url]


The example code given above do we upload it in index.php?


Please post your question with more details in our support forum: [url=]…[/url]

Dr. Jordan Weinstein

Agree with Steve. On touch devices, the images stay flipped. Cannot get them to flip back. Otherwise. Really nice.


Hi Jordan,
I replied to Steve about it. Please take a look.

Dr. Jordan Weinstein

You can also do stuff like this with pure CSS:


Hi Jordan,
Nice demos! Those seems to be caption effects, very different to a flip.

Selena Milton

I’m having an issue where the image rotates back and forth while I’m still hovering, as opposed to holding in place until I move the cursor away. How can I fix this?

dna case

I’m having this same problem, has anyone found a solution to this?


How to get flip on toggle of button



it work fine in normal HTML but when i use it in Magento pages its not working.

Can you please helpme.


Hi Rajath!
Check for JavaScript errors/conflicts in your Console tab of your browser’s inspection tool. Here’s how: Right click, Inspect Element, refresh the page, then check the Console tab for any errors there.

CodeGear Themes

Any Suggestion for random flip jquery plugin?


hello~ first of all i really appreciate to find this post it was really helpful for my personal project, by the way i have a one question why my flip is working not smoothly just like you posted for the result if you know the solution about this question kindly reply back to me thank you and god bless for all your work thank you again


Thanks, Which Flip style are you having issues with?

Cyril Bron

Hello thanks you very much for you plugin

it’s so easy and great !


It doesn’t work mate! I just copy-pasted it and nothing happened! Nothing flipped! What is wrong?


Hi Marin,
I think you may have missed a part it seems to work fine for me.



Thanks man, it really helped. Hover was a little problem in touch devices but used click trigger instead hover and that was quite fine.

David hultz

Simple and easy. Thank you so much


Thank you for your kind words, David.


hi what if i only want it to flip once only? like for memory matching card game. i want the card to flip once only and wont flip back if click again? i want to use a function if not match it will flip back instead if player flick 2nd time it flip back. thnks


i figure it out now…
axis: ‘y’,
reverse: ‘false’,
trigger: ‘manual’



So useful- thank you! Is there anyway if you can make the ‘back’ div be the same size as the ‘front’ image (at the moment, it just got as small as the text)? – I really want the divs to appear the same size, when it turns over. 

I’m making an interactive piece for a university project, so any help is greatly appreciated!!

Jitendra kumar

this demo is not working on IE 11 can you help me 


Is it possible to use jquery to detect which of the two child divs is visible/foremost? I tried style.display and visibility but didn’t get anything useful.


how can i check which side coin ended after flipping front of back please help me


Thanks a lot….  your article saved me.. other articles were crap


Great! So glad this tutorial helped you!


Hi, how can I add the function to a button click?please help me


Cómo puedo hacer que se gire con el click de un boton?
Ya vi que eres de Jalisco xd, soy de Monterrey


If i want it continuous flip

John McMahon

How can I add this to 3 images displayed horizontally?

Would love your thoughts, please comment.x