HTML - Agrandar imagen al pasar por encima el ratón

   
Vista:

Agrandar imagen al pasar por encima el ratón

Publicado por divian (13 intervenciones) el 28/01/2014 13:26:32
Hola a tod@s,
estoy intentando hacer en la web una serie de imágenes, donde al pasar el ratón por encima se agranden.
Lo he intentando en alguna de las imágenes de momento, no siendo el efecto el deseado. Me gustaría que sea la imagen que sea, la ampliación quede siempre en el mismo lugar de la pantalla: en el centro y por encima de las demás imágenes.
Hay algo que falla y no logro saber qué es.
El link es: http://cubos.datcom.ch/earthing/PRUEBA.html

y los códigos son:
css:


1
2
3
4
5
6
7
8
9
10
11
12
13
.thumbnail {position: relative; z-index: 0; }
.thumbnail:hover{ background-color: transparent; z-index: 2;
position:absolute;
top:18x ;
left:80px;
}
.thumbnail span{ /* Estilos para la imagen agrandada */
position: absolute;
visibility: hidden;
text-decoration: none;
}
.thumbnail span img{ border-width: 0; }
.thumbnail:hover span{ visibility: visible; top: 0; left: 0px; }


html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<body>
 
  <div class="background"> <img src="images/mann sin texto.jpg" width="1100px" height="677px" alt="" title="" />
 
 <span>
  <div id="contenedortabla">
  <table align= "center"><TABLE WIDTH=355 HEIGHT=200><tbody><tr>
    <td width="347" style="padding-right: 15px; margin-top: 20px; margin-left: 40px;padding-left: 15px; padding-bottom: 15px; padding-top: 15px">
 
     <a class="thumbnail" href="#thumb"><img src="images/foto1.jpg" width="150px" height="100px" border="0" /><span><img src="images/foto1.jpg" /></span></a>
     <a class="thumbnail" href="#thumb"><img src="images/foto2.jpg" width="150px" height="100px" border="0" /><span><img src="images/foto2.jpg" /></span></a>
     <img src="images/foto3.jpg" width="150px" height="100px"  />
    <img src="images/foto4.jpg" width="150px" height="100px" />
    <img src="images/foto5.jpg" width="150px" height="100px" />
    <a class="thumbnail" href="#thumb"><img src="images/foto6.jpg" width="150px" height="100px" border="0" /><span><img src="images/foto6.jpg" />
    </center>
 
</p></td></tr>
 
  </tbody>
  </table></center>
 
</span>
</div>
</div>
<body>


Mil gracias!!!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
información
Otras secciones de LWP con contenido de HTML
- Código fuente de HTML
- Cursos de HTML
- Temas de HTML
- Chat de HTML
información
Códigos de HTML
- Pagina de Inicio
- Uso del reloj
- Matrix
Imágen de perfil de xve

Agrandar imagen al pasar por encima el ratón

Publicado por xve (1178 intervenciones) el 28/01/2014 18:28:07
Hola Divian, en ningún momento defines la anchura de esta imagen que se visualiza, por eso te ocupa todo el tamaño que precisa...
Prueba a poner una anchura y alguna máxima... algo así:
1
.thumbnail span img{ border-width: 0; width:100px;height:100px;}

Coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Agrandar imagen al pasar por encima el ratón

Publicado por divian (13 intervenciones) el 28/01/2014 19:38:56
Hola xve,
da igual fijar la anchura y la altura de la imagen. Sigue siendo el resultado negativo: se siguen moviendo las demás imágenes, se descolocan... etc.
No sé qué puede ser...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Jose maria

Agrandar imagen al pasar por encima el ratón

Publicado por Jose maria (12 intervenciones) el 28/01/2014 22:36:51
Hola divian:

A veces no se entiende entre lo que dicen ustedes y lo que quieren decir.

Me atrevo a dejarle un enlace que creo me permitirá el administrador del foro (siempre fuí un quiromántico del diseño y el mundo web)
Pasa el ratón, por ejemplo, es la imagen que acompaña el texto de http://www.digitaleando.com/colores.php

¿Es eso lo que quieres?. Es puro CSS
en este caso (evalúa el tamaño de la imagen levantada)
1
2
3
4
5
6
7
8
.imgderecha {width: 40%;
		margin: 6px;
		margin-right: 0;
        float: right;
}
.imgderecha:hover {
    width: 65%;
}
obviamente la imagen va con la clase correspondiente
1
<img src="mi-imagen.jpg" class="imgderecha" alt="mi imagen" />

Si no es lo que quieres, explícalo porque javascript y jQuery tiene soluciones maravillosas
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Agrandar imagen al pasar por encima el ratón

Publicado por divian (13 intervenciones) el 29/01/2014 11:39:15
Hola Jose Maria,
gracias por tu post, pero no es el efecto que quiero. Tienes razón ,me he explicado como un libro cerrado. A ver si ahora es mejor:
en la web aparecen 6 fotos en dos columnas y 3 filas, de forma ordenada.
Lo que quiero conseguir es:
al pasar el ratón sobre cada foto, (o hacer click, me es igual), la foto se agrande y quede sobreexpuesta a las demás (de esta forma solo se verá en pantalla la foto ampliada, las demás pequeñas quedarán debajo). He encontrado algo parecido a lo que quiero (quiza en esta web es demasiado grande la ampliación, algo más pequeño querría:
http://line25.com/wp-content/uploads/2010/jquery-lightbox/demo/index.html

Gracias de nuevo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Jose maria

Agrandar imagen al pasar por encima el ratón

Publicado por Jose maria (12 intervenciones) el 29/01/2014 21:43:12
Es lightbox con jquery

Existen muchas variables, todas ellas documentadas.

Es cuestión de ver la que más que guste y, en muchos casos, adaptarla a tu propio estilo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Agrandar imagen al pasar por encima el ratón

Publicado por divian (13 intervenciones) el 30/01/2014 10:20:05
Sí, ya estoy probando con lightbox y jquery. Los resultados son increíbles!!

Muchas gracias!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar