10.- Ampliación de una imagen al pasar el ratón.
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>
