Estoy haciendo la web de una clínica dental, en ella queremos que en la pagina donde aparece el personal, al pasar el ratón sobre la imagen se despliegue una imagen con el curriculum.
El problema es que en mac me funciona, pero en ie se me solapan las imágenes cuando están en la misma fila. Modificando el valor de z-index a toda la pagina menos a esas dos imágenes no me funciona. Que puedo hacer?? Os dejo el código CSS:
Código:
.ventana{
position: relative;
z-index: 0;
opacity:1.00;
}
.ventana:hover{
background-color: transparent;
z-index: 50;
opacity:1.00;
}
.ventana span{ /*CSS for enlarged image*/
position: absolute;
padding: 5px;
left: -1000px;
visibility: hidden;
opacity:1.00;
color: black;
text-decoration: none;
}
.ventana span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
opacity:1.00;
}
.ventana:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
opacity:1.00;
top: 10px;
left: -400px; /*position where enlarged image should offset horizontally */
position: absolute;
z-index: 50;
}
.puerta{
position: relative;
z-index: 0;
opacity:1.00;
}
.puerta:hover{
background-color: transparent;
z-index: 50;
opacity:1.00;
}
.puerta span{ /*CSS for enlarged image*/
position: absolute;
padding: 5px;
left: -1000px;
visibility: hidden;
opacity:1.00;
color: black;
text-decoration: none;
}
.puerta span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
opacity:1.00;
}
.puerta:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
opacity:1.00;
top: 10px;
left: -25px; /*position where enlarged image should offset horizontally */
position: absolute;
z-index:50;
}
Muchas gracias