Jquery Function To Flip An Image On Click

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. A demo of what I have so far

Solution 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