Hola, usando EXCLUSIVAMENTE CSS, en Firefox lo consigo a la perfección, pero NO en IE, ¿qué hago mal?
HTML:
<div class="contenedorfoto"><a class='thumbnail' href='#thumb'><img src=../images/mirada.jpg/><span><img src=../images/mirada2.jpg/><br/></span></a><br/><span><br/>Mirada</span></div>
CSS:
.contenedorfoto {
float:left;
width:220px;
height:190px;
margin: 10px;
padding:5px;
background-color:#f5f7f9;
border-right: #a5a7aa solid 1px;
border-bottom: #a5a7aa solid 1px;
text-align:center;
color:#000000;
}
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #FFFFFF;
padding:0px;
left:0px;
border:none;
visibility: hidden;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding:0px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top-right:60px;
left:50px; /*position where enlarged image should offset horizontally */
}
img.ampliada {
padding-left:0px;
margin-left:0px;
border: none;
}
¡Gracias!