Possiamo creare una maschera dinamica per le immagini sovrapponendo un elemento alle immagini tramite il posizionamento assoluto dei CSS. Quindi con jQuery possiamo mostrare e nascondere questa maschera, che avrà un'opacità tale da mostrare l'immagine sottostante. Vediamo i dettagli dell'implementazione.
Partiamo da questa struttura HTML:
<ul id="gallery">
<li>
<img src="1.jpg" alt="" />
<p>Lorem ipsum dolor sit amet.</p>
</li>
<li>
<img src="2.jpg" alt="" />
<p>Lorem ipsum dolor sit amet.</p>
</li>
<li>
<img src="3.jpg" alt="" />
<p>Lorem ipsum dolor sit amet.</p>
</li>
</ul>
Il paragrafo all'interno di ciascuna voce di lista sarà la nostra maschera dinamica. Dobbiamo creare un posizionamento contestuale all'interno di ciascuna voce:
#gallery {
margin: 0 auto;
padding: 2em 0;
width: 70%;
height: 100%;
overflow: hidden;
list-style: none;
}
#gallery li {
float: left;
height: 250px;
margin-right: 0.5em;
width: 32%;
position: relative;
}
#gallery li img {
display: block;
height: 100%;
width: 100%;
cursor: pointer;
}
#gallery li p {
width: 100%;
height: 0px;
background: #c0c0c0;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
text-align: center;
font: bold 1.2em Arial, sans-serif;
text-transform: uppercase;
z-index: 1;
margin: 0;
line-height: 250px;
}
Il paragrafo è stato posizionato in modo assoluto e la sua altezza azzerata in modo da creare l'effetto di scivolamento dall'alto verso il basso. Con jQuery dobbiamo semplicemente modificare l'altezza e l'opacità del paragrafo associando un evento click sia al paragrafo che all'immagine:
$(function() {
$('li', '#gallery').each(function() {
var $li = $(this);
var $img = $('img', $li);
var $p = $('p', $li);
$img.click(function() {
$img.next().stop(true, true).animate({
height: '100%',
opacity: '0.7'
}, 'slow');
});
$p.click(function() {
$p.stop(true, true).animate({
height: 0,
opacity: 0
}, 'slow');
});
});
});
Potete visionare l'esempio finale in questa pagina.