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>
<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

Author

  • 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.

    View all posts
0 0 votes
Article Rating
Subscribe
Notify of
guest

36 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
carosouza
carosouza
8 years ago

Hello, very good!! Thanks!

htmgarcia
8 years ago
Reply to  carosouza

Hey @carosouza 🙂

SSteve
SSteve
8 years ago

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
8 years ago
Reply to  SSteve

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
JES777
8 years ago

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

htmgarcia
8 years ago
Reply to  JES777

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
Dr. Jordan Weinstein
8 years ago

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

htmgarcia
8 years ago

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

Dr. Jordan Weinstein
Dr. Jordan Weinstein
8 years ago

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
8 years ago

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

Selena Milton
Selena Milton
8 years ago

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
dna case
7 years ago
Reply to  Selena Milton

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

abcd
abcd
8 years ago

How to get flip on toggle of button

Rajath
Rajath
8 years ago

Hi,

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

Can you please helpme.

Nick Savov
8 years ago
Reply to  Rajath

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
CodeGear Themes
7 years ago

Any Suggestion for random flip jquery plugin?

김태형
김태형
7 years ago

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
7 years ago
Reply to  김태형

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

Cyril Bron
Cyril Bron
7 years ago

Hello thanks you very much for you plugin

it’s so easy and great !

Marin
Marin
7 years ago

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

Daniel Pickering
7 years ago
Reply to  Marin

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

Daniel

Kushal
Kushal
7 years ago

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
David hultz
6 years ago

Simple and easy. Thank you so much

Alex Smirnov
6 years ago
Reply to  David hultz

Thank you for your kind words, David.

Johny
Johny
6 years ago

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
johnny
6 years ago
Reply to  Johny

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

});

Helena
Helena
5 years ago

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
Jitendra kumar
5 years ago

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

Mike
Mike
5 years ago

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
ali
5 years ago

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

Tarun
Tarun
5 years ago

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

Robbie Adair
5 years ago
Reply to  Tarun

Great! So glad this tutorial helped you!

Jesús
Jesús
5 years ago

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

Jesús
Jesús
5 years ago
Reply to  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
Etoo
4 years ago

Hello,
If i want it continuous flip

John McMahon
John McMahon
3 years ago

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

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