premessa
Prendendo spunto dal post di un forum, questa pagina descrive un metodo per aumentare le dimensioni di un'immagine al passaggio del mouse. Il contesto dove questa tecnica trova immediata applicazione è per esempo l'insieme di miniature di una galleria fotografica. Il metodo richiede solo poche e semplici regole css.
esempio
html
<ul class="esempio-1">
<li><a href="#"><img src="http://placehold.it/120x80" alt="esempio"/></a></li>
<li><a href="#"><img src="http://placehold.it/120x80" alt="esempio"/></a></li>
<li><a href="#"><img src="http://placehold.it/120x80" alt="esempio"/></a></li>
<li><a href="#"><img src="http://placehold.it/120x80" alt="esempio"/></a></li>
<li><a href="#"><img src="http://placehold.it/120x80" alt="esempio"/></a></li>
<li><a href="#"><img src="http://placehold.it/120x80" alt="esempio"/></a></li>
<li><a href="#"><img src="http://placehold.it/120x80" alt="esempio"/></a></li>
</ul>
css
.esempio-1, .esempio-1 li {
margin: 0;
padding: 0;
list-style-type: none;
font-size: 0;
line-height: 0;
text-align: center
}
.esempio-1 li {
width: 120px;
margin: 10px;
position: relative;
display: inline-block
}
.esempio-1 li a:hover img {
position: absolute;
z-index:10;
width: 200%;
left: -50%;
top: -110px
}
Questo esempio è stato testato su internet explorer di un windows phone 8.1 e su safari 5.0.6 di un mac.