CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user1853128
user1853128

Reputation: 1114

How to add zoom and flip to an image using css/jquery

I am trying to add both flip and zoom effects, But I am able to achieve only one effect.

Use case is when I click on the Image the image will zoom, now i need to add the flip effect before the mouseleave the image.

Can anyone please help me out with the output using my code.

here it is what I have tried :

HTML

  <div class="flip">
<div class = 'card'>
        <img src="http://cdn.ndtv.com/tech/images/doodle_for_google_2013.jpg" class="zoom_img" />
</div>
    </div>

CSS

.zoom_img {
    height: 250px;
    width: 250px;
    /* -moz-transition: -moz-transform 0.1s ease-in;
    -webkit-transition: -webkit-transform 0.1s ease-in;
    -o-transition: -o-transform 0.1s ease-in; */
    -webkit-transition: -webkit-transform 0.5s ease-in;
    -o-transition: -webkit-transform 0.5s ease-in;
}
.zoom_img_press {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
}
.flip {
    -webkit-perspective: 800;
    width: 400px;
    height: 200px;
    position: relative;
    margin: 50px auto;
}
.flip .card .flipped {
    -webkit-transform: rotatex(-180deg);
}
.flip .card {
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: 0.5s;
}

Javascript

$(document).ready(function() {

        $('.flip').click(function(){
            $(this).find('.zoom_img').addClass('zoom_img_press').mouseleave(function(){
                $(this).removeClass('zoom_img_press');
            });
        });
$(this).find('.zoom_img').addClass('flipped').mouseleave(function(){
                $(this).removeClass('flipped');
            });
       });

    });

Demo

Upvotes: 0

Views: 2566

Answers (2)

super
super

Reputation: 2328

Try this i think it will help you..

Class with multiple transform.

.zoom-flipper{
    -moz-transform: scale(2.2) rotatex(-180deg);
    -webkit-transform: scale(2.2) rotatex(-180deg);
    -o-transform: scale(2.2) rotatex(-180deg);
    transform: scale(2.2) rotatex(-180deg);    
}

Corresponding Script:

$('.flip').click(function(){
    $(this).find('.zoom_img').addClass('zoom-flipper').mouseleave(function(){
        $(this).removeClass('zoom-flipper');
    });
});

Here is the Demo

Upvotes: 3

J2D8T
J2D8T

Reputation: 825

Create two separate JavaScript functions then write jQuery code to manipulate the css for the image within the functions. JQuery css manipulation code example:

 $(".className").css({"background-color":"black","font-size":"12px"});

You can set any css property within the curly brackets.

Then you can call the JavaScript functions on the elements DOM events. So the zoom function will be called with the onClick event and the flip function will be called on the onMouseOut event.

Upvotes: 0

Related Questions