specifying the correct class to add class Jquery

Question

I attempting to create a flip transition which can been seen Here i want this function to activate when the user click on the info button, however i can not seem to target the .card class in order to activate the flip transition.

below is a snippet of my jquery

 $('.active-btn').click(function(){
            $(this).closest('.card').find('.flip')
            .addClass('flipped').mouseleave(function(){
        $(this).removeClass('flipped');
    });
    return false;
});

Answer 1

fiddle
Removing .find('.flip') should help, cause you're interested in flipping the .card

$(this).closest('.card').addClass('flipped').mouseleave(function(){

Answer 2

.find('.flip') will look for element with find class inside .card element, which is not the case per your HTML. As suggested by @Roko : it would help if you remove the .find('.flip') from your script. Also, I see that you have not handled the transform property in css for all the browser, it would be better if you address all the browsers for transform,

-webkit-transform: rotateY(-180deg);
-moz-transform:    rotateY(-180deg);
-ms-transform:     rotateY(-180deg);
-o-transform:      rotateY(-180deg);
transform:         rotateY(-180deg);

Answer 3

Instead of using closest, and find for the .card class, just use the .card class as the selector.

$('.card').addClass('flipped').mouseleave(function()

You'll select any element with .card class, and add the class flipped.