Cómo hacer zoom de una imagen

[neodani]

Buenas,

Tengo varias imágenes miniaturas y me gustaría que al pasar por encima de ellas con el cursor del ratón se resaltaran creciendo (haciendo zoom sobre ellas).

No me refiero a esto:
http://www.creativosonline.org/blog/...-imagenes.html

Sino, que si tengo una imagen fija de 50x50 al pasar por encima de ella, debería aparece la misma imagen pero en tamaño 100x100.

¿Sabéis si esto es posible?

Muchas gracias de antemano!

[mayid]

Es que justamente en ese link que pasaste esta tu solución. Fijate en la demo Inner Zoom:

http://www.professorcloud.com/mainsite/cloud-zoom.htm

Muy bueno, por cierto.

[neodani]

Iniciado por mayid

Es que justamente en ese link que pasaste esta tu solución. Fijate en la demo Inner Zoom:

http://www.professorcloud.com/mainsite/cloud-zoom.htm

Muy bueno, por cierto.

No busco ese efecto mayid, que por cierto es muy bueno :D

Si no más bien tener un recuadro de 50x50 con una imagen en miniatura y que al pasar por encima sobre ella, se muestre un recuadro mas grande de 150x150 encima de ella (la original quedaría debajo) pero esta nueva imagen sería mas grande. No es un inner Zoom sino un Zoom de la imagen al pasar el cursor.

Algo similar sería este, pero este es el clásico lightbox...
http://fancybox.net/

En lugar de pulsar sobre la imagen y salir esa imagen tan grande en mitad de la pantalla, debería salir en el mismo sitio donde esta la miniatura pero mas grande. No se si me explico...

[neodani]

Al final en lo simple encontré la solución!

Con sólo css se podía hacer xD

Creo una imagen pequeña y en el hover le pongo la misma imagen un poco mas grande. El efecto de zoom es conseguido

Código CSS:

#laserp {
background:url("../imagenes/defensa/laserp5.png") no-repeat scroll 165px 0 transparent;
color:#FFFFFF;cursor:pointer;font-size:12px;height:34px;margin-right:20px;padding-top:5px;width:200px;}
#laserp:hover{
background:url("../imagenes/defensa/laserp4.png") no-repeat scroll right 0px transparent;
font-weight:bold;color:#48CBF5;}
 

Salu2 y gracias!

[mayid]

Ah! Ya entendí.

Que bueno lo solucionaras. Igual te paso este link:
http://www.sohtanaka.com/web-design/...fect-w-jquery/

El efecto es muy lindo porque no hace movimientos a secas. Es una presentación mas cool que el simple CSS.

demo: http://www.sohtanaka.com/web-design/...es/image-zoom/

[ForoLonch]

Quizás te interese lo que se cuenta en este enlace:

http://hijosdelspectrum.blogspot.com.es/2012/04/hacer-zoom-con-css.html

Hay ejemplos para descargar y probar.

Un saludo.