En la capa contenido tengo una imagen y el codigo para que cuando le pase el mouse la agrande, quiero saber como puedo hacer lo mismo pero que al pasar el mouse me agrande la imagen en la capa cabecera
<head>
<style type='text/css'>
.thumbnail {position:relative; z-index: 0;}
.thumbnail:hover {background-color: transparent; z-index: 50;}
.thumbnail span { /*CSS Para la imagen ampliada*/
position: absolute;
padding: 0px;
border: 2px dashed gray;
visibility: hidden;
color: #000000;
text-decoration: none;
}
.thumbnail span img { /*CSS Para la imagen ampliada*/
border-width: 0;
padding: 0px;
}
.thumbnail:hover span { /*CSS Para ampliar la imagen sobre hover*/
visibility: visible;
position:absolute; /*position where enlarged image should offset horizontally */
left: 100px;
}
</style>
</head>
<body>
<a class="thumbnail" href="#thumb">[contenido no disponible]<span>[contenido no disponible]
</span></a>
</body>
Gracias por la ayuda!
<head>
<style type='text/css'>
.thumbnail {position:relative; z-index: 0;}
.thumbnail:hover {background-color: transparent; z-index: 50;}
.thumbnail span { /*CSS Para la imagen ampliada*/
position: absolute;
padding: 0px;
border: 2px dashed gray;
visibility: hidden;
color: #000000;
text-decoration: none;
}
.thumbnail span img { /*CSS Para la imagen ampliada*/
border-width: 0;
padding: 0px;
}
.thumbnail:hover span { /*CSS Para ampliar la imagen sobre hover*/
visibility: visible;
position:absolute; /*position where enlarged image should offset horizontally */
left: 100px;
}
</style>
</head>
<body>
<a class="thumbnail" href="#thumb">[contenido no disponible]<span>[contenido no disponible]
</span></a>
</body>
Gracias por la ayuda!