Come fare #zoom on #hover senza javascript/jquery

Giorni fa ho avuto parecchio da fare con i tool presenti qui nella community, e in uno di questi – Thumb your pages – desideravo applicare un effetto zoom al passaggio del mouse (:hover).

Per farlo, solitamente, si usa javascript o jquery, ma gli effetti trovati non mi piacevano molto e comunque si trattava di file javascript piuttosto grandicelli e pesantini… Insomma, non mi andava di usare simili pacchetti per una cosa così semplice!

Ma come rimediare?

Non potevo lasciare le immagini così piccole, e mettendole grandi avrebbero occupato troppo spazio 😐

… Beh, per fortuna ho trovato una soluzione comoda ed efficace

, con sole poche righe di css!

In sostanza abbiamo l’immagine originale ridotta via css, e poi, sempre via css, la riportiamo “lentamente” alle dimensioni originali.

Quindi immagine originale di 320px; la divido, ad esempio, per 2,5 ed ottengo 128px.

128px sarà la misura iniziale; 2.5 il valore di zoom (quindi tornerà al valore originale di 320 – senza rovinare la qualità).

Insomma, basta usare la calcolatrice 😆

Tutto qua, semplice e veloce!

Come? Ecco un esempio!

<style>
.thumb img {
    /* 320 ÷ 2.5 ... */
    width: 128px;
    border: 1px dotted gray;
    -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;
}
.thumb img:hover {
    border: 1px solid red;
    -webkit-transform:scale(2.5); /* Safari and Chrome */
    -moz-transform:scale(2.5); /* Firefox */
    -ms-transform:scale(2.5); /* IE 9 */
    -o-transform:scale(2.5); /* Opera */
     transform:scale(2.5);
}
</style>
 
<p class="thumb">
  <a title="Go to: https://www.laltroweb.it" target="_blank" href="https://www.laltroweb.it">
    <img alt="thumb" src="https://www.laltroweb.it/uploads/_gen_thumbnails/th_https_laltroweb_it.jpg">
  </a>
</p>

Demo (passa il mouse sopra per l’effetto):

Semplicissimo, non trovate? 🙂

Spero possa tornarvi utile!

---

---

---