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
Interesante articulo!
Disfrutan también de descuentos en los nombres de dominios. Los códigos de cupones que no se expiran nunca para GoDaddy.com, funcionan con las renovaciones también.
Solo éntrelos en la comprobación.
SPN3 – .COM por $7.45 – ahorra $2
SPN1 – el 10% de cualquier orden
SPN2 – $5 de cualquier orden de $30 o más
VISITA:
http://mejoresdescuentos.es/godaddy-promo-codes/
http://MejoresDescuentos.es
Lo andaba buscando hace buen tiempo, hasta que lo encontre, gracias por el aporte
Muy bien explicado, lo necesitaba para mi web, lo probare.
weycl.com