I'm creating a tattoos site that contains a photo gallery. I would like that when the user passes the mouse over an image it is enlarged to a larger size.
I'm a beginner in site assembly, I understand a bit of HTML and CSS; however, I am not aware of JavaScript.
There are several ways to solve your problem, even all of them 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 for you to work on. 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.br/images/srpr/logo11w.png"/>HereisaJSFiddlelinkforexampleworkingcodeincasetheSOptpreviewdoesnotwork: JSFiddle
I hope I have helped!
You can do without JavaScript, which I think is cooler. Using CSS3% property%:
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);
}
There are some nice jQuery plugins to do these things.
One of the most interesting ones I've seen is jQuery Zoom .
In addition to being beautiful and functional, your "installation" is very easy, you have step-by-step there on the site.
If you have problems please let me know.