HTML - Zoom con lupa al abrir imagen

Zoom con lupa al abrir imagen

Publicado por Alex (5 intervenciones) el 30/03/2017 17:22:54

Hola buenas tardes.

Tengo una duda que es que al tener una galería de imágenes y al hacer click en la foto para verla mas grande no me aparece la típica lupa para poder verla mas grande ya que contiene texto. Hay alguna forma de que aparezca la lupa para poder aumentarla de forma predeterminada?

Gracias y un saludo

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 2

Val: 1.144

Zoom con lupa al abrir imagen

Publicado por xve (1543 intervenciones) el 30/03/2017 18:44:33

Hola Alex, una manera muy sencilla, es poniendo la imagen que tu quieres desde CSS... algo así:

.module {

  cursor: url('path-to-image.png'), auto;

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Zoom con lupa al abrir imagen

Publicado por Alex (5 intervenciones) el 30/03/2017 19:51:42

Perdona mi ignorancia, estoy aprendiendo html y no se como funciona, el .module que significa? habría que crear otro div o algo así?

Lo estoy haciendo desde la etiqueta style, este es mi código por si te puede ayudar:

<style>

.galeria * {-moz-box-sizing: border-box !important;-webkit-box-sizing: border-box !important;box-sizing: border-box !important;

.galeria {

text-align: center !important;font-size:0 !important;line-height:0 !important;

.galeria br {

height:0;width:0;display:none;

.galeria a, .galeria img, .galeria .separator, .galeria .separator a {

clear:none !important; float: none !important; display: inline-block !important;*display: inline !important; zoom:1 !important; max-width: 100% !important;padding: 0 !important; margin:0 !important; border: 0 !important; font-size:0 !important;

.galeria img {

width: 200px !important;max-width: 100% !important;height: auto !important;margin: 10px !important;background: white !important;padding: 10px !important;vertical-align: middle !important;-moz-box-shadow: 1px 1px 3px #999;-webkit-box-shadow: 1px 1px 3px #999;box-shadow: 1px 1px 3px #999;

</style>

Valora esta respuesta

Comentar

Pos: 2

Val: 1.144

Zoom con lupa al abrir imagen

Publicado por xve (1543 intervenciones) el 30/03/2017 20:21:59

el .module seria el nombre de la clase que contiene los elementos donde quieres que aparezca dicho icono...

por ejemplo, si las imagenes son del tipo:

<img class="imagen" src="....">

<img class="imagen" src="....">

...

el css seria:

.imagen {

  cursor: url('path-to-image.png'), auto;

De tal manera, que cada vez que pongas el cursor sobre una de las imágenes que tienen dicha clase, se mostrara dicho cursor.

Valora esta respuesta

Comentar

Zoom con lupa al abrir imagen

Publicado por Alex (5 intervenciones) el 30/03/2017 21:17:31

Muchísimas gracias, había probado antes a hacerlo así, pero no me funcionó. De hecho, cuando lo cambio no me deja ver la foto, deberia cambiar el div que tengo por img class?

De nuevo muchas gracias y un saludo.

Valora esta respuesta

Comentar

Pos: 2

Val: 1.144

Zoom con lupa al abrir imagen

Publicado por xve (1543 intervenciones) el 31/03/2017 08:31:49

Hola Alex, acabo de probarlo y funciona perfectamente!!!

pon esto en un pagina.html

<style>

img {width:100px;height:100px;border:1px solid;}

.imagen {

  cursor: url('flecha.png'), auto;

</style>

<img class="imagen" src="....">

<img class="imagen" src="....">

y pon una imagen pequeña con el nombre de flecha.png en la misma carpeta... al pasar el raton por encima de los recuadros, se te mostrara el icono de la imagen.

Valora esta respuesta

Comentar

Zoom con lupa al abrir imagen

Publicado por Alex (5 intervenciones) el 31/03/2017 12:04:41

Muchisimas gracias!!!!!! Funciona perfectamente!!!!!!!!! Aunque no es exactamente lo que quiero hacer, lo que pretendo hacer es lo siguiente: La imagen está subida de este modo:

<a href="imagen.jpg"><img src="imagen.jpg"/>

Y al hacer click sobre ella que me la abra y me de una opción automática como en muchas páginas de poder ampliarla, es decir, que de alguna forma se te cambie el icono del ratón en forma de lupa para poder aumentar la imagen.

Muchas gracias y un cordial saludo.

Valora esta respuesta

Comentar

Pos: 10

Val: 159

Zoom con lupa al abrir imagen

Publicado por Xavi (57 intervenciones) el 31/03/2017 20:18:23

Hola Alex, algo como esto: http://www.lawebdelprogramador.com/codigo/JQuery/2524-Efecto-lupa-al-pasar-el-raton-por-encima-de-una-imagen.html

Valora esta respuesta

Comentar

Zoom con lupa al abrir imagen

Publicado por Alex (5 intervenciones) el 03/04/2017 18:08:02

Hola buenas tardes.

No se trata de usar código web o jquery, perdona pero no se de que otra forma explicártelo. Cuando al abrir una imagen después te da opción a ampliarla, te aparece una lupa predeterminada(se cambia el icono del ratón automáticamente) que te da opción a hacerla un poco mas grande toda la imagen. A lo mejor esto te sirve de ayuda(a target='blank')
Entra en esta pagina: https://www.flickr.com/ pon en el buscador animales por ejemplo y después haz click en la imagen para verla, veras como te aparece el icono de una lupa para ampliarla.

Gracias y muchos saludos.

Valora esta respuesta

Comentar

Al pasar el ratón por encima se me cambia el color del fondo

<td> colspan automático