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:
html:
Mil gracias!!!
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
0
