mis conocimientos son muy basicos y esto es lo que tengo hecho
<style>
ul{
float:left;
}
#imagenes{
margin-left:10%;
margin-right:10%;
margin-top:10%;
width:1000px;
height:auto;
}
ul.cat{
list-style:none;
}
.min{
width:110px;
height:100px;
}
.max{
position:absolute;
width:200px;
height:150px;
visibility:hidden;
}
li:hover .max{
visibility:visible;
}
</style>
</head>
<body>
<div id="imagenes">
<ul class="cat">
<li>
<a href="#">
<img class="min" src="imagenes/pequeñas/1.jpg" />
<img class="max" src="imagenes/pequeñas/1.jpg" />
</a>
</li>
<li>
<a href="#">
<img class="min" src="imagenes/pequeñas/2.jpg" />
<img class="max" src="imagenes/pequeñas/2.jpg" />
</a>
</li>
<li>
<a href="#">
<img class="min" src="imagenes/pequeñas/3.jpg" />
<img class="max" src="imagenes/pequeñas/3.jpg" />
</a>
</li>
<li>
<a href="#">
<img class="min" src="imagenes/pequeñas/4.jpg" />
<img class="max" src="imagenes/pequeñas/4.jpg" />
</a>
</li>
</ul>
</div>
pero con este codigo me situa la imagen agrandada abajo de la normal y me gustaria que quedara encima como en la pagina