Hoverbox Image Gallery 2
Con este código de css puro podras lograr este efecto, para verlo haz click en donde dise "Vista Previa" (más arriba) o click aquí.
Este código es muy simple, es cuestion de colocarlo en tu web y editar las imagenes que quieras, la imagen que se ve en el ejemplo es de 200x150, y se puede poner más.
Sin nada más que decir pasemos al código
<link rel="stylesheet" href="http://fafo.netne.net/Hoverbox%20Image%20Gallery/css/hoverbox.css" type="text/css" media="screen, projection" />
<script src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/A2EB891D63C8/avg_ls_dom.js" type="text/javascript"></script><!--[if lte IE 7]>
<link rel="stylesheet" href='http://fafo.netne.net/Hoverbox%20Image%20Gallery/css/ie_fixes.css' type="text/css" media="screen, projection" />
<![endif]-->
<h1>Hoverbox Image Gallery</h1>
<ul class="hoverbox">
<li><a href="#"><img alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo01.jpg" /><img class="preview" alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo01.jpg" /></a></li>
<li><a href="#"><img alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo02.jpg" /><img class="preview" alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo02.jpg" /></a></li>
<li><a href="#"><img alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo03.jpg" /><img class="preview" alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo03.jpg" /></a></li>
<li><a href="#"><img alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo04.jpg" /><img class="preview" alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo04.jpg" /></a></li>
<li><a href="#"><img alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo05.jpg" /><img class="preview" alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo05.jpg" /></a></li>
<li><a href="#"><img alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo06.jpg" /><img class="preview" alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo06.jpg" /></a></li>
<li><a href="#"><img alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo07.jpg" /><img class="preview" alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo07.jpg" /></a></li>
<li><a href="#"><img alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo08.jpg" /><img class="preview" alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo08.jpg" /></a></li>
<li><a href="#"><img alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo09.jpg" /><img class="preview" alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo09.jpg" /></a></li>
<li><a href="#"><img alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo10.jpg" /><img class="preview" alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo10.jpg" /></a></li>
<li><a href="#"><img alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo11.jpg" /><img class="preview" alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo11.jpg" /></a></li>
<li><a href="#"><img alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo12.jpg" /><img class="preview" alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo12.jpg" /></a></li>
<li><a href="#"><img alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo13.jpg" /><img class="preview" alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo13.jpg" /></a></li>
<li><a href="#"><img alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo14.jpg" /><img class="preview" alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo14.jpg" /></a></li>
<li><a href="#"><img alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo15.jpg" /><img class="preview" alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo15.jpg" /></a></li>
<li><a href="#"><img alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo16.jpg" /><img class="preview" alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo16.jpg" /></a></li>
<li><a href="#"><img alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo17.jpg" /><img class="preview" alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo17.jpg" /></a></li>
<li><a href="#"><img alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo18.jpg" /><img class="preview" alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo18.jpg" /></a></li>
<li><a href="#"><img alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo19.jpg" /><img class="preview" alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo19.jpg" /></a></li>
<li><a href="#"><img alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo20.jpg" /><img class="preview" alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo20.jpg" /></a></li>
</ul>
<script src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/A2EB891D63C8/avg_ls_dom.js" type="text/javascript"></script><!--[if lte IE 7]>
<link rel="stylesheet" href='http://fafo.netne.net/Hoverbox%20Image%20Gallery/css/ie_fixes.css' type="text/css" media="screen, projection" />
<![endif]-->
<h1>Hoverbox Image Gallery</h1>
<ul class="hoverbox">
<li><a href="#"><img alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo01.jpg" /><img class="preview" alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo01.jpg" /></a></li>
<li><a href="#"><img alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo02.jpg" /><img class="preview" alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo02.jpg" /></a></li>
<li><a href="#"><img alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo03.jpg" /><img class="preview" alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo03.jpg" /></a></li>
<li><a href="#"><img alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo04.jpg" /><img class="preview" alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo04.jpg" /></a></li>
<li><a href="#"><img alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo05.jpg" /><img class="preview" alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo05.jpg" /></a></li>
<li><a href="#"><img alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo06.jpg" /><img class="preview" alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo06.jpg" /></a></li>
<li><a href="#"><img alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo07.jpg" /><img class="preview" alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo07.jpg" /></a></li>
<li><a href="#"><img alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo08.jpg" /><img class="preview" alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo08.jpg" /></a></li>
<li><a href="#"><img alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo09.jpg" /><img class="preview" alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo09.jpg" /></a></li>
<li><a href="#"><img alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo10.jpg" /><img class="preview" alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo10.jpg" /></a></li>
<li><a href="#"><img alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo11.jpg" /><img class="preview" alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo11.jpg" /></a></li>
<li><a href="#"><img alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo12.jpg" /><img class="preview" alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo12.jpg" /></a></li>
<li><a href="#"><img alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo13.jpg" /><img class="preview" alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo13.jpg" /></a></li>
<li><a href="#"><img alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo14.jpg" /><img class="preview" alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo14.jpg" /></a></li>
<li><a href="#"><img alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo15.jpg" /><img class="preview" alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo15.jpg" /></a></li>
<li><a href="#"><img alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo16.jpg" /><img class="preview" alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo16.jpg" /></a></li>
<li><a href="#"><img alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo17.jpg" /><img class="preview" alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo17.jpg" /></a></li>
<li><a href="#"><img alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo18.jpg" /><img class="preview" alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo18.jpg" /></a></li>
<li><a href="#"><img alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo19.jpg" /><img class="preview" alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo19.jpg" /></a></li>
<li><a href="#"><img alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo20.jpg" /><img class="preview" alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo20.jpg" /></a></li>
</ul>
El texto seleccionado con rojo es la url de tu imagen (en este caso esta galería cuenta con 20 imagenes).
El texto seleccionado con azul es la url de la imagen.
Si quieren agregar más imagenes, agreguen este codigo antes de </ul>.
<li><a href="#"><img alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo01.jpg" /><img class="preview" alt="description" src="http://fafo.netne.net/Hoverbox%20Image%20Gallery/img/photo01.jpg" /></a></li>
Eso es todo, gracias
