Zoom image using CSS or JS

Question

So the best I could find to help have an image zoom a tad bit larger was this code:

onmouseover="this.width=175;this.height=75;" onmouseout="this.width=150;this.height=50"

Is there any better alternative to make it zoom larger, as in you can see it instead of the image just simply re-sizing in a blip?

Thanks :)

If I understand you correctly, you want the image to zoom smoothly. For that you need css3 transitions. — MultiplyByZer0, Dec 21 '13 at 08:34
If you mean smooth resizing of an image, it already asked here JavaScript - Smooth Movement / Resizing: http://stackoverflow.com/questions/4356312/javascript-smooth-movement-resizing — S.Serpooshan, Dec 21 '13 at 08:39
This question should not be closed, as it's not exact duplicate, here, OP is asking for a CSS solution as well — Mr. Alien, Dec 23 '13 at 08:02

score 3 · Answer 1 · edited May 23 '17 at 12:16

How about doing this with pure CSS3 transition and transform by scaling the image..

Demo

div {
    position: relative;
    margin: 100px;
    height: 300px;
    width: 300px;
    border: 1px solid #515151;
}

img {
    position: absolute;
    padding: 5px;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
}

div:hover img {
    -moz-transform: scale(1.1,1.1);
    -webkit-transform: scale(1.1,1.1);
    transform: scale(1.1,1.1);
}

You can refer my answer here for cross browser zoom properties.

Just set the border of the element correctly like Demo (made height and width to 310px because of 5px padding on all sides)

Zoom image using CSS or JS

1 Answers1