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

When you try to 'scale' an image so that it looks smaller, the pixels are compressed and the image may be even sharper than normal, but when you use it to increase, the pixelation effect occurs.

For the purpose you want, you can have two images of each, in gallery size (small) and zoom size. You will then use the code to show the larger image when you move the mouse.

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

I would do the following, I would use the object-fit: cover property on the images so they would not be disproportionate according to the size you want, but if the size you want is much larger than the size of the photo, there is no do always go pixelize, 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<imgclass="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><imgsrc="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>

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

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

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 quite understand ... See if it works for you too. Just add in the same CSS that you need to zoom in:

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

In fact the image does not blur (or "pops", as we often say) when you scale it up to its actual size. This only occurs when the applied scale is larger than the actual dimensions of the image.

In the example below I apply the same scale of 1.3 and the image does not pop because it has a real dimension of 220x220, and in the code I put a height of 150 pixels, which when hovering over, goes to 195 pixels (1.3), below 220 actual 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 at actual size ( height 220 pixels) and apply the same scale of 1.3. See that it "bursts" and loses its quality, because I am 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" />