How to zoom in on an image by hovering over it?

Question

I’m creating a tattoos website that contains a photo gallery. I would like when the user hovers the mouse over an image to be enlarged to a larger size.

I’m a beginner in building websites, I understand a little HTML and CSS; however, I have no knowledge of Javascript.

Answer 1

There are several ways to solve your problem, even all derived from a single one. You can use ready made solutions - by searching Google, you will find several free and/or paid libraries - or create them from scratch.

Here I propose an example so you can work on it. It just magnifies/reduces the image without great beauty involved.

---

var entidade = document.getElementById('imagem');

// Altere o número para a apliação/redução desejada
var fator_lupa = 2;

entidade.onmouseover = function () { this.style.width = (this.clientWidth * fator_lupa) + "px"; };

entidade.onmouseout = function () { this.style.width = (this.clientWidth / fator_lupa) + "px"; };

<img id="imagem" width="200" src="https://www.google.com/images/srpr/logo11w.png" />

---

Here is a link from Jsfiddle for example of the code in operation in case the Sopt preview does not work: Jsfiddle

I hope I’ve helped!

Answer 2

It is possible to do without using Javascript, which I find more cool. Using the property transform:scale of CSS3:

img {
    -webkit-transition: all 1s ease; /* Safari and Chrome */
    -moz-transition: all 1s ease; /* Firefox */
    -ms-transition: all 1s ease; /* IE 9 */
    -o-transition: all 1s ease; /* Opera */
    transition: all 1s ease;
}

img:hover {
    -webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);
}

Source with more information.

Answer 3

HTML:

<img src="/img/fundo.jpg" >

CSS:

img:hover{
   height: 50%;
   width: 50%;
  }