Paolo De Feo
a- a+

Zoom con CSS su immagini per ingrandire dettagli senza Javascript

Vediamo come creare una galleria fotografica con effetto zoom con CSS3.

In questo tutorial impareremo a creare una galleria fotografica con effetto zoom con il solo ausilio dei CSS3. La creazione di una fotogallery con queste caratteristiche visive viene effettuata di solito con l’implementazione supplementare di codice JavaScript. Tuttavia, codifiche simili rischiano di appesantire troppo la pagina, con il rischio che le immagini non vengano caricate.

Vediamo come procedere.

La struttura HTML

La prima cosa da fare è creare un documento HTML con il markup che farà da ossatura: in questo caso una lista non ordinata che richiamerà sia le immagini “thumbnail” che le standard. Ecco un esempio del risultato finale:

div id="galleria">
    <ul>
        <li> <img src="img/imagine-piccola.jpg" class="mini" width="100" height="100"  /> <img src="img-grandi/immagine-grande.jpg" class="pic"  /> </li>
    
// qui continua la tua lista    
     </ul>
</div>

Gli stili CSS

Ora dobbiamo procedere allo styling del div “galleria”. La proprietà CSS3 che useremo sarà box-shadow.

#galleria {
    border: 10px solid #1D0C16;
    height: 300px;
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    overflow: visible;
    background: #272229;
    /*applico il box-shadow per Safari e Chrome*/
    -webkit-box-shadow: #272229 10px 10px 20px;
    /*applico il box-shadow per Firefox*/
    -moz-box-shadow: #272229 10px 10px 20px;
    /*applico un filtro per Internet Explorer*/
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=10);     
    /* applico il box-shadow per Opera*/
     box-shadow: #272229 10px 10px 20px;
}

#galleria ul{
    /* questo accorgimento colloca il contenuto UL nel mezzo della gallery */
    margin-left:-30px; 
}

#galleria ul li {
    /* Diamo un padding di 10 pixel per formattare tutto al meglio    */

    list-style:none; 
    display:inline-table; 
    padding:10px;	     
 }

Questa era la prima parte del nostro foglio di stile. Ora creeremo la nostra animazione fotografica: a venirci in aiuto sarà la proprietà CSS3 “transition”.

/* Questa è l’immagine che verrà mostrata quando passerermo col mouse sopra il LI che contiene la miniature immagine o thumbnail */
#galleria ul li .pic{
    /* Animazione con effetto transizione per Safari e Chrome */
    -webkit-transition: all 0.6s ease-in-out;
    /* Animazione con effetto transizione per Firefox */
    -moz-transition: all 0.6s ease-in-out;
    /* Animazione con effetto transizione per Opera*/
    -o-transition: all 0.6s ease-in-out;
    /* Opacità 0 per creare l’effetto fadeOut */
   opacity:0;
   visibility:hidden; 
   position:absolute; 
   margin-top:10px; 
   margin-left:-20px; 
   border:1px solid black;
   /*effetto shadow box per Safari e Chrome*/
   -webkit-box-shadow:#272229 2px 2px 10px;
   /*effetto shadow box per Firefox*/
   -moz-box-shadow:#272229 2px 2px 10px;
   /*effetto shadow box con filtro  in Internet Explorer*/
   filter:progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=5);
   /*effetto shadow box per Opera*/
   box-shadow:#272229 2px 2px 10px;
}
#galleria ul li .mini:hover{
    cursor:pointer;
}

/* Mostriamo l’immagine al passaggio del mouse*/
#gallery ul li:hover .pic {
    /* Specifichiamo le dimensioni delle immagini con l’effetto applicato */
   width:200px; 
   height:200px;
   opacity:1; 
   visibility:visible; 
   float:right;
}

La creazione di una galleria fotografica in CSS3 è giunta al termine.



Ti potrebbe interessare anche

commenta la notizia

C'è 1 commento
Redazione
Ti interessano altri articoli su questo argomento?
Chiedi alla nostra Redazione!