CSS: effetto lightbox

  • CSS
  • Gabriele Romanato
CSS: effetto lightbox

In questo articolo vorrei presentare un'implementazione di un effetto lightbox ottenuto con i soli CSS. Questa tecnica è resa possibile dalla pseudo-classe CSS3 :target che ci permette, tramite le transizioni CSS3, di applicare degli stili quando si clicca sul link che punta ad un determinato elemento. Vediamo insieme il risultato.

Partiamo dalla seguente marcatura:


<body>

<div class="thumb">
    <a href="#img-box">
        <img src="thumb.jpg" alt="" />
	</a>
</div>

<div id="img-wrapper">
    <div id="img-box">
        <a href="#img-wrapper">
            <img src="full.jpg" alt="" />
        </a>
    </div>
</div>

​
</body>

Il link della thumbnail punta al contenitore del nostro lightbox, mentre il link dell'immagine a piene dimensioni punta al genitore del lightbox. Opereremo quindi un'assegnazione incrociata degli stili:


div.thumb {
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 5px;
    background: #fafafa;
    margin: 1em 2em;
    max-width: 150px;
}

div.thumb a {
    display: block;
    width: 150px;
    height: 94px;
}

div.thumb a img {
    display: block;
}



#img-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 0px;
    height: 0px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    -moz-transition: all 500mss ease-in;
    -webkit-transition: all 500ms ease-in;
    -o-transition: all 500ms ease-in;
    -ms-transition: all 500ms ease-in;
    transition: all 500ms ease-in;
}

#img-box:target {opacity: 1; width: 100%; height: 100%;}

#img-box img {
    width: 400px;
    height: 250px;
    padding: 25px;
    background: #fff;
    border: 1px solid #ccc;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -150px 0 0 -225px;
} 

#img-wrapper {
    -moz-transition: all 500mss ease-in;
    -webkit-transition: all 500ms ease-in;
    -o-transition: all 500ms ease-in;
    -ms-transition: all 500ms ease-in;
    transition: all 500ms ease-in;
}

#img-wrapper:target {
    width: 0px;
    height: 0px;
    overflow: hidden;
    opacity: 0;
}

Tramite la pseudo-classe :target gli stili saranno applicati solo quando si clicca sul rispettivo link. Potete visionare l'esempio finale in questa pagina.

Ti potrebbe interessare anche

Torna su