agrandar imagenes

lenit · #1 (**permalink**) 16/11/2012, 16:04

hola quiero hacer una pagina web que me visione las imagenes como en esta http://www.evanescence.com/photos.aspx con css como lo podria hacer? gracias de antemano

C2am · #2 (**permalink**) 16/11/2012, 20:13

Y que conocimientos tienes?
Tienes algo hecho?
En el ejemplo que pones lo hacen con javascript, aunque se podría hacer algo similar con css3

Saludos

lenit · #3 (**permalink**) 17/11/2012, 06:43

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