Sobreponer una imágen a otra con CSS

3
7417

 Tutorial imagen sobre otra con CSS

Escribir la siguiente estructura dentro del cuerpo del documento HTML:

 <div class="container-border">
<div class="video-dev">
<a title="Click Here To Play Video" class="video-a-link" href="http://www.youtube.com"><span class="video-link-span"></span></a>
</div>
</div>

 Ahora el código CSS necesario:

<style type="text/css">   
/*borde contenedor -- no necesario*/
.container-border {
border:1px red solid;
padding:3px;
width: 111px; height: 157px;;
margin-top:5px;
margin-right: 1px;
float:left;
}

/*la imagen de fondo en si*/
.video-dev {
cursor:pointer;
position:relative;
background:url(rockingvideo.jpg) no-repeat center;
width: 111px;
height: 157px;
left: 0px;
top: 0px;
}

.video-a-link {
position:relative;
}

/*por si cursor:pointer no cubre todo --no necesario*/
a {
color:#0E58A0;
width: 111px; height: 157px;
left: 0px; top: 0px;
display:block;
}

/*imagen soprepuesta, pequeño icono Play*/
/*en IE no se verá transparente, en el resto si*/
.video-dev .video-link-span {
background:transparent url(play_icon.gif) no-repeat scroll 0pt 50%;
cursor:pointer;
color:#000000;
display:block;
height:35px;
position:absolute;
text-align:center;
text-decoration:none;
vertical-align:bottom;
width:34px;
opacity: 0.8;
left: 38px;
top: 68px;
}
</style>

Muy práctico, pero particularmente encontre un pequeño inconveniente. Definir el tamaño de cada imágen en el código CSS, a menos que todas tengan las misma dimensiones. Pero por supuesto dependerá de cual sea la finalidad de nuestro proyecto. ¿Qué les parece?

Visto en Developer Snippets

3 COMENTARIOS

Comments are closed.