Nesbet

Escribe tu nombre
Afiliados

Fafo-Ayuda


Fafo - La creatividad va más halla de nuestros limites

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>

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
 
Este sitio web fue creado de forma gratuita con PaginaWebGratis.es. ¿Quieres también tu sitio web propio?
Registrarse gratis