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:

{codecitation}<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>{/codecitation}

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:

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

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:

{codecitation}<script src=”https://code.jquery.com/jquery-2.1.4.min.js”></script>{/codecitation}

jQuery Flip plugin:

{codecitation}<script src=”/path/to/jquery.flip.min.js”></script>{/codecitation}

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

{codecitation}<script>
$(function(){
$(“.flip”).flip({
trigger: ‘hover’
});
});
</script>{/codecitation}

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.

{codecitation}<script>
$(function(){
$(“.flip”).flip({
trigger: ‘hover’,
axis: ‘x’
});
});
</script>{/codecitation}

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

Instructor

  • 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
Subscribe
Notify of
36 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
carosouza

Hello, very good!! Thanks!

htmgarcia

Hey @carosouza 🙂

SSteve

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?

htmgarcia

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

JES777

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

htmgarcia

Hi,
Please post your question with more details in our support forum: [url=https://www.ostraining.com/support-forum/support/]https://www.ostraining.com/…[/url]
Regards

Dr. Jordan Weinstein

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

htmgarcia

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

Dr. Jordan Weinstein

You can also do stuff like this with pure CSS:
[url=http://www.hongkiat.com/blog/css3-image-captions/]http://www.hongkiat.com/blo…[/url]

htmgarcia

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

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?

abcd

How to get flip on toggle of button

Rajath

Hi,

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

Can you please helpme.

Nick

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

daniel-pickering

Thanks, Which Flip style are you having issues with?
Daniel

Cyril Bron

Hello thanks you very much for you plugin

it’s so easy and great !

Marin

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

danielpickering

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

Daniel

Kushal

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

alex-smirnov

Thank you for your kind words, David.

Johny

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

johnny

i figure it out now…
$card.flip(
{
axis: ‘y’,
reverse: ‘false’,
trigger: ‘manual’
}
);
$card.click(function(){
$(this).flip(true);

});

Helena

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 

Mike

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.

ali

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

Tarun

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

robbieadair

Great! So glad this tutorial helped you!

Jesús

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

Jesús

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

Etoo

Hello,
If i want it continuous flip

John McMahon

Hello,
How can I add this to 3 images displayed horizontally?

36
0
Would love your thoughts, please comment.x
()
x