Foros del Web » Creando para Internet » CSS »

Ayuda con css para ampliar una imagen

Estas en el tema de Ayuda con css para ampliar una imagen en el foro de CSS en Foros del Web. Hola He buscado por internet un código para al situar el puntero por encima de la imagen, esta se amplie. Funciona bien, lo que pasa, ...
  #1 (permalink)  
Antiguo 13/04/2010, 07:26
 
Fecha de Ingreso: noviembre-2005
Mensajes: 186
Antigüedad: 12 años, 1 mes
Puntos: 1
Ayuda con css para ampliar una imagen

Hola

He buscado por internet un código para al situar el puntero por encima de la imagen, esta se amplie. Funciona bien, lo que pasa, es que al ampliarse la imagen, parte de la imagen ampliada queda detrás de la imagen todavía pequeña que hay en la fila de la derecha. El caso es que por más que pruebo, no sé que parte del código tocar para solucionarlo.

El código es este:

Código HTML:
</head>
<style type='text/css'>
.thumbnail{position: relative; z-index: 0;}
.thumbnail:hover{ background-color: transparent;z-index: 50;}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;padding: 5px;left: -100px;border: 0px dashed gray;
visibility: hidden;color: #FFFF00;text-decoration: none;z-index: 0;}
.thumbnail span img{ /*CSS for enlarged image*/border-width: 0;padding: 2px;}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;top: 0;left: 10px; /*position where enlarged image should offset horizontally */}
</style>
<body>
<table>
<tr>
<td>
<a class="thumbnail" style="cursor: move;"><img style="width: 141px; height: 141px;" src="images/klematis_small.jpg" border="0" /><span><img  style="width: 450px; height: 450px;;" src="images/klematis_small.jpg" /></span></a>
</td>
<td>
<a class="thumbnail" style="cursor: move;"><img  style="width: 141px; height: 141px;" src="images/klematis4_small.jpg" border="0" /><span><img  style="width: 450px; height: 450px;" src="images/klematis4_small.jpg" /></span></a>
</td>
</tr>
</table>
</body> 
Así es como queda, como veis parte de la imagen grande, es ocultada por la imagen todavía pequeña de la columna de la derecha.

  #2 (permalink)  
Antiguo 13/04/2010, 08:19
 
Fecha de Ingreso: noviembre-2005
Mensajes: 186
Antigüedad: 12 años, 1 mes
Puntos: 1
Respuesta: Ayuda con css para ampliar una imagen

Hola

Ahora me doy cuenta que el esto ocurre con internet Explorer, con firefox, la nueva imagen ampliada sale por encima, eso sí sale casí al pie de la foto pequeña, pero por encima. Lo digo por si puede servir de ayuda.

Saludas
  #3 (permalink)  
Antiguo 13/04/2010, 10:09
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 4 meses
Puntos: 137
Respuesta: Ayuda con css para ampliar una imagen

intenta con
Código:
.thumbnail{position: relative; z-index: 0;}
.thumbnail:hover{ background-color: transparent;z-index: 50;position: relative;}
es decir, la posicion relativa se la das al div "contenedor" de la imagen cuando el cursor/mouse se fija sobre el...

Última edición por alexk; 13/04/2010 a las 10:10 Razón: fuck code jaja, si otra vez

Etiquetas: Ninguno
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 15:40.