CODEWITHSUNDEEP
javascriptjqueryhtmlcss
FlyingCat
FlyingCat

Reputation: 14250

How to zoom in to the center of a div

I want to create a zoom in effect on my large div. I have searched many questions and still don't know how this work.

I want to be able to zoom into the center of the user screen instead of the set position.

http://jsfiddle.net/kB27M/1/

I have tried css3 zoom feature and animate zoom property but still can't pull this one. Can anyone help me about it? Thanks a lot!

Upvotes: 0

Views: 1008

Answers (1)

Gabriele Romanato
Gabriele Romanato

Reputation: 84

You should scale the div:

    .scaled {
       -moz-transform: scale(3);
       -webkit-transform: scale(3);
       -ms-transform: scale(3);
           transform: scale(3);
    }
    div {
        transition: all 500ms ease-in;
    }

Simply apply the CSS class to the div and then use the transitionEndevent to apply further styles via .animate().

On transitionEnd (discard live(), use on()): jsfiddle

Upvotes: 2

Related Questions