<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ampliador de imagen - Recursos CSS - araudi.net</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#contenedor {
position: relative;
}
.miniatura {
z-index: 0;
text-decoration: none;
}
.miniatura span {
padding: 160px;
position: absolute;
text-decoration: none;
visibility: hidden;
border: 0;
}
.miniatura:hover span {
visibility: visible;
top: 0;
left: 0;
}
.miniatura img {border: 0;}
.miniatura img.mini {
height: 150px;
width: 200px;
}
.miniatura img.maxi {
height: 400px;
width: 520px;
}
</style>
</head>
<body>
<div id="contenedor">
<a href="#" class="miniatura"><img class="mini" src="tu-imagen.jpg" alt="Alicante" title="Alicante" />
<span><img class="maxi" src="tu-imagen.jpg" alt="" title="" /><br />
Foto nº 1</span></a>
<a href="#" class="miniatura"><img class="mini" src="tu-imagen1.jpg" alt="Ibiza" title="Ibiza" />
<span><img class="maxi" src="tu-imagen1.jpg" alt="" title="" /><br />
Foto nº 2</span></a>
<a href="#" class="miniatura"><img class="mini" src="tu-imagen2.jpg" alt="Alicante" title="Alicante" />
<span><img class="maxi" src="tu-imagen2.jpg" alt="" title="" /><br />
Foto nº 3</span></a>
</div>
</body>
</html>