Buscador


En todo Internet
En Uterra.Com

¿Problemas sexuales?
Jerez de la Frontera
y Cádiz
Homosexualidad, infidelidad, divorcio, violencia de género, etc.

Contenidos


Una forma de crear una atractiva galería de imagenes es presentar una miniatura y que al pasar el ratón sobre ella podamos ver la foto en todo su detalle. Este código CSS se permitira ver una ampliacion con la imagen ajustada a un tomaño concreto. Si lo que deseas es que la imagen se presente en su verdadero tamaño, elimina las etiquetas width y height que aparecen al final de código.

<html> 
<head> 
<title>Muestra la ampliacion de una imagen cuando pasamos el raton sobre la miniatura.</title> 

<style type="text/css">
.thumbnail{position: relative;z-index: 0;font:12px verdana;}
.thumbnail:hover{background-color: transparent;z-index: 50;}
.thumbnail span{position: absolute;background-color:#eaeaea;padding: 5px;
left: -1000px;border: 1px dashed #999;visibility: hidden;
color: black;text-decoration: none;}
.thumbnail span img{border-width: 0;padding: 2px;}
.thumbnail:hover span{visibility: visible;top: 0;left: 60px;}
</style>
 
</head> 

<body> 

<a class="thumbnail" href="#">
<img src="http://www.uterra.com/archcodfuente/demos_img/imagen10.jpg" border="0" />
<span><img src="http://www.uterra.com/archcodfuente/demos_img/amp_imagen10.jpg" 
width="600" height="500" />
<br/>Descripción de la imagen</span></a>

</body>
</html>