Creare un effetto zoom al passaggio del mouse con i CSS è piuttosto semplice e richiede solo pochi passaggi. Il trucco sta nel modificare la proprietà ‘transform’ del CSS quando l’elemento viene sorvolato con il mouse.
Prima di tutto, scegli l’elemento HTML che desideri utilizzare. Ad esempio, potrebbe essere una semplice immagine:
```
```
Ora, bisogna aggiungere un codice CSS che realizza l’effetto zoom quando il cursore del mouse passa sopra l’elemento HTML. Si utilizza l’evento :hover per rilevare quando il cursore del mouse “sorvola” l’elemento e si usa la proprietà ‘transform’ per applicare lo zoom.
```
.zoom {
transition: transform .2s; /* Animation */
}
.zoom:hover {
transform: scale(1.5); /* (150% zoom – Note: if the zoom is too large, it will go outside of the viewport) */
}
```
Nell’esempio sopra, il ‘transition’ definisce quanto velocemente avviene l’effetto di zoom. Quindi, se si desidera un effetto di zoom più lento, si può modificare il valore ‘.2s’ in un numero più grande. Inoltre, ‘scale(1.5)’ definisce quanto grandi o piccoli diventano gli elementi zoomati. Il valore ‘1.5’ significa che gli elementi diventano il 50% più grandi della loro dimensione originale. Modifica questo valore per ottenere l’effetto desiderato.
Questo creerà un semplice effetto zoom al passaggio del mouse usando solo CSS.
