jQuery function to flip an image on click

Question

I\'ve written some css to flip an image. It\'s working fine, but I want to convert it to a function so that I can call that function in an onclick event.

<

Answer 1

It's pretty simple to add this to your current solution:

CSS

Replace the :hover state with a class:

.f1_container:hover .f1_card {}
/* becomes */
.f1_container.active .f1_card {}

JavaScript

Add this JavaScript part that toggles the new class on click:

$('.f1_container').click(function() {
    $(this).toggleClass('active');
});

Demo

Try before buy