CSS Resize/Zoom-In effect on Image while keeping Dimensions

Question

I would like to use the CSS3 scale() transition for a rollover effect, but I'd like to keep the rollover image dimensions the same. So, the effect is that the image zooms in, but it remains constrained to its existing width and height.

img:hover {
    transform:scale(1.5);
    -ms-transform:scale(1.5); /* IE 9 */
    -moz-transform:scale(1.5); /* Firefox */
    -webkit-transform:scale(1.5); /* Safari and Chrome */
    -o-transform:scale(1.5); /* Opera */
}

Here's a basic fiddle to begin with.

But again, I want the image to keep the width/height.

I'm not married to using the css3 scale. Maybe there's a better way by resizing the element.

Neau

with DHTML use the "style" object and reset the transform propert e.g. document.getElementById("myimage").style.transform=" scale(1.8);"; the following two urls are what to see w3schools.com/howto/howto_css_zoom_hover.asp developer.mozilla.org/en-US/docs/Web/CSS/transition – Elinorelinore

Answer 1

You could achieve that simply by wrapping the image by a <div> and adding overflow: hidden to that element:

<div class="img-wrapper">
    <img src="..." />
</div>

.img-wrapper {
    display: inline-block; /* change the default display type to inline-block */
    overflow: hidden;      /* hide the overflow */
}

WORKING DEMO.

---

Also it's worth noting that <img> element (like the other inline elements) sits on its baseline by default. And there would be a 4~5px gap at the bottom of the image.

That vertical gap belongs to the reserved space of descenders like: g j p q y. You could fix the alignment issue by adding vertical-align property to the image with a value other than baseline.

Additionally for a better user experience, you could add transition to the images.

Thus we'll end up with the following:

.img-wrapper img {
    transition: all .2s ease;
    vertical-align: middle;
}

UPDATED DEMO.

.img-wrapper {
    display: inline-block;
    overflow: hidden;
    
    border: 1px solid gray;
}

.img-wrapper img {
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -ms-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
    
    vertical-align: middle;
}

.img-wrapper img:hover {
    -webkit-transform:scale(1.5); /* Safari and Chrome */
    -moz-transform:scale(1.5); /* Firefox */
    -ms-transform:scale(1.5); /* IE 9 */
    -o-transform:scale(1.5); /* Opera */
    transform:scale(1.5);
}

<div class="img-wrapper">
    <img src="http://ts2.mm.bing.net/th?id=HN.608017620862175177&pid=15.1&H=160%20&W=80" />
</div>

Helotism

Great idea. I updated it a little to add a border to the wrapper, and set a height on the wrapper: jsfiddle.net/7vY7v/2 (It was not wrapping the image tightly) – Neau

@Neau What about adding transition to images? :) jsfiddle.net/hashem/7vY7v/3 – Helotism

I was looking to do something like this that would be responsive but of course at some point you need to constrain a container that the image scales inside...ie a non percentage. – Farmhouse