CSS transition: zoom e opacity effect su image hover

Categoria: CSS | Livello: Beginner | Tags: zoom, css3, opacity
Scritto da il . Aggiornato il 2015-06-06.
Applicare un effetto zoom all'immagine sull'hover usando le transizioni CSS.

In questo esempio di web design viene mostrato come applicare l'effetto zoom a un'immagine con le transizioni CSS tramite la proprietà hover. Viene applicata inoltre un'opacità.

CSS transition: zoom e opacity effect
Scarica Gratis l'esempio (HTML5 + CSS3)

1. Download dei file di esempio

Il pacchetto in formato compresso .zip contiene i file HTML e CSS oltre a un'immagine di prova. I due effetti (zoom e opacità) possono essere applicati separatamente e su tutte le immagini, incluse le icone. Nota: nello zip è inclusa un'immagine a bassa risoluzione per contenere il peso.

Titolo CSS Transition: hover property e zoom effect
Release 0.1.0 del 2014-04-29
Descrizione Codice di esempio per l'applicazione dell'effetto zoom a un'immagine usando le transizioni CSS e la proprietà hover.
Linguaggi HTML5, CSS3
Contenuto Scripts. Files: index.html, main.css
Anteprima hover-effect-image.png.
Download css1v0_1_0.zip
Data Pubblicato per la prima volta il 2014-04-29
Lingua it-IT
Autore
Licenza Licenza Creative Commons Attribuzione - Condividi allo stesso modo 3.0 Italia (CC BY-SA 3.0 IT)

2. Il codice html

Per applicare all'immagin un effetto atramite transizione CSS è sufficiente assegnarle una classe, ad esempio:

<img src="img/hover-effect-image.jpg" class="iclass" title="CSS Transition Hover Effect">

L'assegnazione della classe iclass (si può scegliere qualunque nome non già usato) avviene con la dichiarazione all'interno del codice come visto sopra, cioè con class="iclass". L'html completo della pagina web che include l'immagine è:

<!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>CSS Transition - Image hover effect</title>
            <meta name="robots" content="noindex, nofollow">
            <link rel="stylesheet" type="text/css" href="css/main.css">
        </head>
        <body>
            <header>
                <h1>CSS Transition - Image hover effect</h1>
            </header>
            <div class="bodiv">
                <img src="img/hover-effect-image.jpg" class="iclass" title="CSS Transition Hover Effect">
            </div>
        </body>
    </html>

3. Il foglio di stile

Tramite la proprietà hover stabiliamo quale sia l'evento che scatena la transizione, cioè che mette in moto l'effetto sull'immagine.
Per essere più precisi :hover è una pseudo-classe così definita dal W3C:

The :hover pseudo-class applies while the user designates an element with a pointing device, but does not necessarily activate it.

Esempio classico: quando l'utente porta il mouse sull'immagine avviene la transizione. Agiamo dunque sul CSS per fare in modo che all'hover sull'immagine avvenga la nostra transizione CSS. Per il tipo di transizione scegliamo di applicare insieme opacità e zoom.

Nel foglio di stile avremo due blocchi di istruzioni:

  1. img.iclass:hover -> sono le istruzioni che riguardano gli effetti di zoom e opacità, in pratica è scritto cosa accadrà.
  2. img.iclass -> come avverrà la transizione, ovvero per quali proprietà, con quale durata e con quali modalità.
img.iclass:hover {
    -webkit-transform: scale(1.1,1.1);
    -moz-transform: scale(1.1,1.1);
    -o-transform: scale(1.1,1.1);
    -ms-transform: scale(1.1,1.1);
    transform: scale(1.1,1.1);
    opacity: 0.7;
}
img.iclass {
    -webkit-transition: all 250ms ease-in-out;
    -moz-transition: all 250ms ease-in-out;
    -ms-transition: all 250ms ease-in-out;
    -o-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
}

scale(x,y) definisce una trasformazione in scala bidimensionale; se x e y sono uguali l'effetto che si ottiene è simile a uno zoom. Immaginando di volere zoomare l'immagine del 10% impostiamo: scale(1.1,1.1). Per l'opacity scegliamo di portare all'hover il valore da 1 a 0.7.

Nel blocco di istruzioni relativo a img.iclass:

Se vogliamo definire altre proprietà per le immagini possiamo inserire le stesse in un div e applicare una classe, come si vede anche dal codice HTML riportato sopra in cui l'img src=... è all'interno di un div class="bodiv". In questa pagina (e nei file di esempio) il CSS si completa quindi con queste istruzioni:

div.bodiv {
margin: 20px;
padding: 20px;
}
.bodiv img {
height: 480px;
width: 640px;
background: none;
border: green solid 10px;
}

Per rendere responsive tutte le immagini, infine, le istruzioni sopra vanno leggermente modificate:

img {
max-width: 100%;
}
div.bodiv {
margin: 20px;
padding: 20px;
}
.bodiv img {
height: auto;
width: 640px;
background: none;
border: green solid 10px;
}

Con queste modifiche tutte le immagini si ridimensionano occupando al più il 100% della larghezza del del div che le contiene.

CSS transition: zoom e opacity effect
Scarica Gratis l'esempio (HTML5 + CSS3)

Francesco D'Agostino | Twitter (@webbalo) | Google+ | Facebook