¿Cómo logro este efecto "zoom"?

[JoJa]

He encontrado ESTA WEB y me ha gustado el efecto ese que hay al situar el cursor encima de una imagen, ese efecto zoom y quisiera aplicarlo en un proyecto pero viendo el código fuente no me aclaro ya que no soy un entendido de etiquetas divs ni css.

¿Alguien podría ayudarme a conseguir un efecto similar?
Gracias.

[bhagat]

Hola JoJa

en esta web tienes un ejemplo hecho solo con css

http://www.cssplay.co.uk/menus/magnifier2.html

fijate en el codigo fuente en estas lineas

<style type="text/css">

#enlarge {padding:0; margin:4em auto; list-style-type:none; width:240px; height:40px;}
#enlarge li {display:block; float:left; width:40px; height:40px; position:relative;}
#enlarge li a {display:block; width:40px; height:40px; background:transparent; overflow:hidden; position:relative;}
#enlarge li a img {width:100%; height:100%; border:0;}
#enlarge li a:hover {position:absolute; left:-20px; top:-20px; width:80px; height:80px; z-index:100;}


</style>

de hecho es un excelente sitio web para asuntos de CSS, no solo de menús, te lo recomiendo


suerte

[JoJa]

Ok! Muchas gracias, lo probaré a ver que tal funciona ;) De momento parece un ejemplo fácil para mi entendimiento.

Gracias por tu ayuda, me pondré a trabajar ahora mismo :D