htmlcssrollover

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

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.

Solution

  • 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>