Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Cómo hacer zoom de una imagen

Estas en el tema de Cómo hacer zoom de una imagen en el foro de Frameworks JS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 02/08/2010, 15:19
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 13 años, 7 meses
Puntos: 20
Cómo hacer zoom de una imagen

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!
  #2 (permalink)  
Antiguo 03/08/2010, 07:08
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 11 años, 7 meses
Puntos: 101
Respuesta: Cómo hacer zoom de una imagen

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.
  #3 (permalink)  
Antiguo 03/08/2010, 12:07
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 13 años, 7 meses
Puntos: 20
Respuesta: Cómo hacer zoom de una imagen

Cita:
Iniciado por mayid Ver Mensaje
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...
  #4 (permalink)  
Antiguo 03/08/2010, 16:12
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 13 años, 7 meses
Puntos: 20
Respuesta: Cómo hacer zoom de una imagen

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:
Ver original
  1. #laserp {
  2. background:url("../imagenes/defensa/laserp5.png") no-repeat scroll 165px 0 transparent;
  3. color:#FFFFFF;cursor:pointer;font-size:12px;height:34px;margin-right:20px;padding-top:5px;width:200px;}
  4. #laserp:hover{
  5. background:url("../imagenes/defensa/laserp4.png") no-repeat scroll right 0px transparent;
  6. font-weight:bold;color:#48CBF5;}

Salu2 y gracias!
  #5 (permalink)  
Antiguo 05/08/2010, 08:01
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 11 años, 7 meses
Puntos: 101
Respuesta: Cómo hacer zoom de una imagen

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/
  #6 (permalink)  
Antiguo 29/09/2012, 13:47
Avatar de ForoLonch  
Fecha de Ingreso: septiembre-2012
Mensajes: 2
Antigüedad: 8 años
Puntos: 0
Respuesta: Cómo hacer zoom de una imagen

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.

Última edición por ForoLonch; 29/09/2012 a las 13:53

Etiquetas: zoom
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:42.