How to make an image increase without losing quality with CSS?

Asked

Viewed 5,940 times

2

I want to create like a photo gallery, but here’s the thing, inside a <div> there are several photos that, even if not of the same size, will be shown of the same size (and a smaller size so that all fit on the screen)!

By hovering over the images, they would increase to their actual size. I tried using the following code:

-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);

But the problem is that with this, the image is "blurred". I wanted the same effect (or similar effect), but without losing the image quality. Someone knows how I do it?

css css3 image

  • Did you crop the images? or just force them to be 1/3 of their size with CSS? I’ve never used transform: scale(), so I’m not sure, but if his behavior is to zoom in on the element the way it’s shown, you should look for an alternative way to get that effect.

  • An idea, why don’t you do the opposite!? Leaves the image in the gallery with transform: scale(0.7) and in the :hover puts transform: scale(1)

4 answers

1

When you try to 'scale' an image to make it look smaller, the pixels are compressed and the image may get even sharper than normal, but when you use it to increase, the pixelization effect occurs.

For the purpose you aim for, you can have two images of each, in the gallery size (small) and zoom size. Then, it will use the code to show the larger image when passing the mouse.

Another alternative is to use larger images, and compress them in the gallery, performing the opposite of what you did.

0

I’d do it this way, use the property object-fit: cover in images like this they would not be disproportionate according to the size you want, but if the size you want is much bigger than the size of the photo there is no what do will always pixelate, see my example:

img.teste{
  object-fit: cover;  
  width: 256px;
  height: 200px;
}
<div> 
  128x128
  <img class="teste" src="http://www.sain.fazenda.gov.br/imagens/120430.gif/@@images/06a7b0b1-575b-46e5-8b22-3065cdd5095b.jpeg" />
</div>
<div>
  700x700
  <img class="teste" src="http://imguol.com/2013/01/23/23jan2013---a-nasa-agencia-espacial-norte-americana-divulgou-um-mosaico-de-imagens-do-sol-para-ilustrar-como-sao-feitas-as-observacoes-em-diferentes-comprimentos-de-onda-do-astro-nos-sempre-o-1358946571784_700x700.jpg" />  
 </div>

<div>
  oririnais <br>
  <img  src="http://www.sain.fazenda.gov.br/imagens/120430.gif/@@images/06a7b0b1-575b-46e5-8b22-3065cdd5095b.jpeg" />
  <img src="http://imguol.com/2013/01/23/23jan2013---a-nasa-agencia-espacial-norte-americana-divulgou-um-mosaico-de-imagens-do-sol-para-ilustrar-como-sao-feitas-as-observacoes-em-diferentes-comprimentos-de-onda-do-astro-nos-sempre-o-1358946571784_700x700.jpg" />
</div>

Note that the original images are of different sizes and I put other measures in css.

But the ideal is always to use the image of the size it really is.

0

I understood what you need because you had the same problem. And I found on the Internet a code that does not blur, I did not understand very well... See if for you it works too. Just add in the same CSS you need to give the "zoom":

-webkit-transition:  all .01s cubic-bezier(.190, 1.000, .220, 1.000);
-moz-transition: all .01s cubic-bezier(.190, 1.000, .220, 1.000);
-ms-transition: all .01s cubic-bezier(.190, 1.000, .220, 1.000);
-o-transition: all .01s cubic-bezier(.190, 1.000, .220, 1.000);
transition: all .01s cubic-bezier(.190, 1.000, .220, 1.000);

0

In fact the image does not defocus (or "pop", as we say) when you scale her up until the actual size of the image. This only occurs when the applied scale is larger than the actual image dimensions.

In the example below I apply the same scale of 1.3 and the image does not burst, because it has a real dimension of 220x220, and in the code I put a height 150 pixels, which when you hover over, goes to 195 pixels (1.3), below 220 real height:

img:hover{
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Basketball.jpeg/220px-Basketball.jpeg" height="150" />

Now, in the same image, I display it in full size (height 220 pixels) and apply the same scale of 1.3. See that it "bursts" and loses quality, because I’m increasing its dimensions beyond real values:

img:hover{
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
    }
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Basketball.jpeg/220px-Basketball.jpeg" width="220" height="220" />

Browser other questions tagged css css3 image

You are not signed in. Login or sign up in order to post.