Come realizzare in Css e Javascript un effetto zoom al passaggio del mouse sopra una immagine
In CSS possiamo creare una semplice funzionalità, che consente di zoommare una immagine al passaggio del mouse sopra di essa.
Oggi vediamo due esempi:
- nel primo, passando con il mouse sopra l'immagine, la stessa verrà completamente zoomata
- nel secondo esempio, che richiederà anche l'utilizzo di javascript, andremo a zoomare solo uno specifico punto.
Esempio 1: zoom completo dell'immagine
Vediamo subito il codice e poi lo commentiamo
<!DOCTYPE html>
<html lang='it'>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Esempio zoom immagine in css</title>
<style>
.zoom-container {
width: 400px;
height: 222px;
position: relative;
overflow: hidden;
}
.zoom-container img {
top: 0;
left: 0;
width: 400px;
height: 222px;
opacity: 0.5;
transition: all 500ms ease-in;
position: absolute;
}
.zoom-container img:hover {
top: 0px;
left: 0px;
opacity: 1;
width: 900px;
height: 500px;
}
</style>
</head>
<body>
<div class="zoom-container">
<img src="miaimmagine.jpg">
</div>
</body>
</html>Il codice è molto semplice. Abbiamo un <div>, con classe "zoom-container", ha dimensione 400x222 pixel, al cui interno abiamo inserito la nostra immagine, a cui inizialmente assegnamo la stessa dimensione... alla fine dell'articolo ti dirò il perchè.
Questa classe ha un "overflow: hidden" che consentirà, quando faremo lo zoom dell'immagine, di impedire all'immagine ingrandita di uscire dal suo spazio di 400x200.
Gli abbiamo inoltre assegnato un "position: relative", per poter poi assegnare all'immagine, all'interno del <div>, un "position: absolute".
Passiamo all'immagine. Come detto, all'interno del div, avrà un posizionamento assoluto, e la fissiamo al margine sinistro superiore con "top: 0;left: 0;". Gli assegnamo in partenza anche un trasparenza del 50% ("opacity: 0.5"), ed infine una proprietà "transition" che gestirà con gradualità il momento del passaggio del mouse sopra all'immagine.
Al passaggio del mouse entra in azione la pseudo classe "hover": determina lo zoom dell'immagine, che viene aumentata alla dimensione 900x500, proporzionale alla dimensione di partenza per evitare distorsioni, e senza trasparenza ("opacity: 1"). Giocando con i valori di "top" e "left", e la dimensione finale dell'immagine, possiamo zoomare una sezione specifica dell'immagine.
Nota 1: facendo uno zoom, l'immagine, man mano che viene zoommata, potrebbe risultare sgranata. Per questo motivo, l'immagine sorgente deve avere una dimensione maggiore di 400x222. La cosa migliore sarebbe avere una immagine con una dimensione uguale, o meglio maggiore, di quella finale che vogliamo ottenere con lo zoom. Nel nostro caso la dimensione effettiva dell'immagine è 1200x667, Così facendo l'immagine di partenza sarà 400x222, e passando il mouse sull'immagine questa verrà portata verso la sua dimensione originale, scongiurando così di vedere l'immagine sgranata.
Nota 2: per rendere cross browser l'opacità dell'immagine, invece di inserire soltando "opacity" nella classe, inserite questo codice
Per la trasparenza al 50%
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 5-7 */
filter: alpha(opacity=50);
/* Netscape */
-moz-opacity: 0.5;
/* Safari 1.x */
-khtml-opacity: 0.5;
/* Good browsers */
opacity: 0.5;Mentre per togliere la trasparenza
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
/* IE 5-7 */
filter: alpha(opacity=100);
/* Netscape */
-moz-opacity: 1;
/* Safari 1.x */
-khtml-opacity: 1;
/* Good browsers */
opacity: 1;Puoi vedere il codice in azione cliccando qui.
Esempio 2: zoom di una zona specifica dell'immagine
Anche questa funzionalità è molto presente nei siti e-commerce, e ci consente di ingrandire una porzione specifica dell'immagine.
Vediamo anche in questo subito il codice e poi lo commentiamo.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {box-sizing: border-box;}
.zoom-container {
position: relative;
}
.zoom-lens {
position: absolute;
border: 1px solid #d4d4d4;
/*set the size of the lens:*/
width: 40px;
height: 40px;
}
.zoom-result {
border: 1px solid #d4d4d4;
/*set the size of the result div:*/
width: 200px;
height: 200px;
}
#myimage{width:400px;height:223px;}
</style>
<script>
function imageZoom(imgID, resultID) {
var img, lens, result, cx, cy;
img = document.getElementById(imgID);
result = document.getElementById(resultID);
/*create lens:*/
lens = document.createElement("DIV");
lens.setAttribute("class", "zoom-lens");
/*insert lens:*/
img.parentElement.insertBefore(lens, img);
/*calculate the ratio between result DIV and lens:*/
cx = result.offsetWidth / lens.offsetWidth;
cy = result.offsetHeight / lens.offsetHeight;
/*set background properties for the result DIV:*/
result.style.backgroundImage = "url('" + img.src + "')";
result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
/*execute a function when someone moves the cursor over the image, or the lens:*/
lens.addEventListener("mousemove", moveLens);
img.addEventListener("mousemove", moveLens);
/*and also for touch screens:*/
lens.addEventListener("touchmove", moveLens);
img.addEventListener("touchmove", moveLens);
function moveLens(e) {
var pos, x, y;
/*prevent any other actions that may occur when moving over the image:*/
e.preventDefault();
/*get the cursor's x and y positions:*/
pos = getCursorPos(e);
/*calculate the position of the lens:*/
x = pos.x - (lens.offsetWidth / 2);
y = pos.y - (lens.offsetHeight / 2);
/*prevent the lens from being positioned outside the image:*/
if (x > img.width - lens.offsetWidth) {x = img.width - lens.offsetWidth;}
if (x < 0) {x = 0;}
if (y > img.height - lens.offsetHeight) {y = img.height - lens.offsetHeight;}
if (y < 0) {y = 0;}
/*set the position of the lens:*/
lens.style.left = x + "px";
lens.style.top = y + "px";
/*display what the lens "sees":*/
result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
}
function getCursorPos(e) {
var a, x = 0, y = 0;
e = e || window.event;
/*get the x and y positions of the image:*/
a = img.getBoundingClientRect();
/*calculate the cursor's x and y coordinates, relative to the image:*/
x = e.pageX - a.left;
y = e.pageY - a.top;
/*consider any page scrolling:*/
x = x - window.pageXOffset;
y = y - window.pageYOffset;
return {x : x, y : y};
}
}
</script>
</head>
<body>
<div class="zoom-container">
<img id="myimage" src="miaimmagine.jpg">
<div id="myresult" class="zoom-result"></div>
</div>
<script>
// Inizializzo l'effetto zoom
imageZoom("myimage", "myresult");
</script>
</body>
</html>Il primo <div>, con classe "zoom-container" è un contenitore.
Al suo interno abbiamo l'immagine, con id "myimage", di dimensione 400x223 pixel, e un secondo <div>, con id "myresult" e classe "zoom-result", di dimensione 200x200 pixel, dove vedremo la porzione dell'immagine zoommata.
Muovendo il mouse sopra all'immagine, il puntatore presenterà attorno un quadrato di 40x40 pixel, definito dalla classe "zoom-lens": sarà questa zona quella che il javascript provverà a zoomare nel div "myresult".
Puoi vedere il codice in azione cliccando qui.
