Una semplice galleria di immagini realizzata solo con html e css, sull'evento hover verra portata in primo piano la miniatura
html body {
text-align: center;
margin-top:35px;
background: black url("img/matrix.gif");
}
#wrapper {
margin: auto;
width: 812px;
text-align: left;
padding: 6px;
}
.container {
position: relative;
color: white;
}
.container a{
color: white;
text-decoration: none;
}
.thumbnail span{
position: absolute;
padding: 5px;
border: 1px solid gray;
display: none;
background-color: black;
}
.thumbnail span img{
width: 670px;
border-width: 0;
padding: 2px;
}
.thumbnail:hover span,.thumbnail span.first {
display: inline;
top: 0;
left: 125px;
z-index: 2;
}
.thumbnail span.first {
z-index: 1;
}
img.thumb {
width:120px;
height:86px;
border:none;
}
<div id="wrapper">
<div class="container">
<a class="thumbnail" href="#">
<img src="img/10.jpg" class="thumb"/>
<span class="first">
Keanu Reeves : Neo <br/>
<img src="img/10.jpg"/>
</span>
</a>
<br />
<a class="thumbnail" href="#">
<img src="img/12.jpg" class="thumb"/>
<span>
Carrie-Anne Moss: Trinity <br/>
<img src="img/12.jpg" />
</span>
</a>
<br />
<a class="thumbnail" href="#">
<img src="img/11.jpg" class="thumb"/>
<span>
Laurence Fishburne : Morpheus<br />
<img src="img/11.jpg" />
</span>
</a>
<br />
<a class="thumbnail" href="#">
<img src="img/07.jpg" class="thumb"/>
<span>
Monica Bellucci : Persephone<br />
<img src="img/07.jpg" />
</span>
</a>
<br />
<a class="thumbnail" href="#">
<img src="img/08.jpg" class="thumb"/>
<span>
Hugo Weaving: Smith<br/>
<img src="img/08.jpg"/>
</span>
</a>
<br />
<a class="thumbnail" href="#">
<img src="img/13.jpg" class="thumb"/>
<span>
Adrian e Neil Rayment <br />
<img src="img/13.jpg" />
</span>
</a>
</div>
</div>