Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

css

rollover

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.

like image 439
mtyson Avatar asked Mar 18 '14 22:03

mtyson


People also ask

How do I resize an image using CSS without losing the aspect ratio?

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.

How do you change the size of an image without distorting it in CSS?

Try removing width="100%", or set the width manually based on the aspect ratio.

How do I stop a CSS layout from distorting when zooming in out?

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).

How do you scale an image proportionally in CSS?

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.


1 Answers

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>
like image 195
Hashem Qolami Avatar answered Sep 21 '22 12:09

Hashem Qolami