Show Play Icon on Mouse over Thumbnail using CSS

I decided to share a simple trick on how to display a "Play" image when mouse is hovered over a video Thumbnail using only CSS. (Sites like Metacafe and similar ones have this feature). Its very easy to implement.

At first, lets declare a simple CSS class for a thumbnail inside an anchor Tag.

.item { width: 125px; height: 80px; }	
.item a { text-decoration: none; display:block; }
.item a img { border: solid 1px #ccc; padding: 1px;}	

Note: I added a wrapper 'item' class for convenience.

The above CSS class is self-explanatory. I will add an img tag inside an "anchor" tag. To display a play icon/image on hover, I will add another "span" tag inside the "anchor" tag. The "span" tag will have a height equals to the height of Thumbnail, a negative top-margin, a z-index. I give it a class name "play". The CSS code is below:

.item { width: 125px; height: 80px; }	
.item a { text-decoration: none; display:block; }
.item a img { border: solid 1px #ccc; padding: 1px;}	

// the span item for showing play icon. 
.item a span.play { display:none; background: url('http://www.itsalif.info/blogfiles/video-play/play-arrow.png') center center no-repeat; margin: -80px 10px 0 0; height: 80px; position: relative; z-index: 100; opacity: 0.8; filter: alpha(opacity=80); }
.item a:hover span.play { display:block; }

Though I used a span, however, any other allowable tag can be used.

Now I add the following Code:

The Result is below:

As can be seen, a nice "play" icon is displayed when mouse is hovered over the image. The method works fine on IE7/8, FF 2/3, Safari and Google Chrome. Unfortunately, this doesn't work on IE-6 using CSS, hence a work-around using Javascript is needed.

Attachment	Size
video-play.zip	6.63 KB