How to “zoom”/“scale” in div's content with css or jquery?


Tags: javascript,jquery,html,css

Problem :

The effect I am trying to achieve needs to keep the center in its place and zoom in the content while still maintaining the width and height of the div.

An example:

before -> after

 [x]      [X]

Or if you don't mind links this site has it implemented on the homepage and its square containers

I have tried using the inspect element feature, but didn't really find any javascript calls or css on it. And google also didn't give me any tutorial, guess it's hard to name this effect.

Therefore, if someone could be so kind and forward me to a tutorial, function or give some tips I would greatly appreciate it.

Looking forward yo your replies.



Solution :

You're looking for CSS Transforms.

On the website in question, this is implemented by way of

.view-tenth img {
    /* [other directives omitted] */
    transition: all 0.6s ease-in-out 0s;
}

.view-tenth:hover img {
    /* [other directives omitted] */
    transform: scale(1.1) rotate(0deg);
}

    CSS Howto..

    how to fix a division using css and js..?

    How can I prevent a responsive nav menu (powered by a CSS3 transition) from animating when different media queries take effect?

    How to float menu list elements

    Show 100% of background

    How can I center div, inside other div with bootstrap classes?

    How to add styles to wordpress default menu

    How can I block clicks and Java Script in a HTML

    CSS - How to make IE7 respect min-width

    Greasemonkey how to apply a CSS rule only for @media print?

    How to manage opacity of element INSIDE table row on HOVER this row?

    How do you make a div display two inline items that stretch the width?

    How can I position some divs inside an unordered list so they line up with the root element of the list?

    How to create rounded corners on DIV's with CSS and ASP.NET MVC 3

    Any ideas how to replicate this inline dropdown menu using css/jquery

    How can I fix this CSS positioning for the transition to work? (CSS3 with Bootstrap)

    How do I use Stylish to change the font in Google Tasks?

    how to get a CSSStyleSheet object from a