CODEWITHSUNDEEP
css
Atif
Atif

Reputation: 10880

How to make video thumbnails like Facebook [CSS]

I am looking to make video thumbnails like on facebook but I am not able to get that play button over the thumbnail like on facebook.

alt text

CODE

HTML

<a href="watch-video.php?c=1244">
    <img src="http://img.youtube.com/vi/X0OdLlX-cIw/1.jpg">
    <b></b>
</a>

CSS

.wall_video a {display: block; width: 128px; height: 96px; padding: 4px; border: 1px solid #cccccc; position: relative}
.wall_video a img {display: block; width: 128px; height: 96px; }
.wall_video a b {background: url(images/play-icon.png) no-repeat; display: block; width: 28px; height: 30px; position: absolute;}

When I try to float the img then the button goes right on top. At first I thought its position:relative and negative top margin but when I checked the source of facebook they dont use relative positioning.

Upvotes: 0

Views: 1129

Answers (1)

Matti Virkkunen
Matti Virkkunen

Reputation: 65126

.wall_video a b {
    /* ... */
    position: absolute;
    left: 5px;
    bottom: 5px;
}

Upvotes: 1

Related Questions