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.
The Simple Solution Using CSSBy setting the width property to 100%, you are telling the image to take up all the horizontal space that is available. With the height property set to auto, your image's height changes proportionally with the width to ensure the aspect ratio is maintained.
Try removing width="100%", or set the width manually based on the aspect ratio.
To fix the problem with zooming in, try adding the min-width attribute to your outer countainer ( #container or #navbar ?). Setting min-width prevents the webpage from trying to shrink down beyond the specified width (i.e. 300px).
A common use is to set max-width: 100%; height: auto; so large images don't exceed their containers width. Another way is the use of object-fit property, this will fit image, without changing the proportionally.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With