Add a video effect to website images

I regularly listen to last.fm, it's an amazing internet radio station but they also have a good website. One thing I find really interesting is their flash audio player. While it's playing music it cycles through images of the artist. Not only that, but it adds a filter to the images so they look like an old fuzzy, pixelated CRT video screen - here's an example:

This effect is achieved by adding partially transparent layers above the image in flash, but we can achieve the same style with basic HTML and CSS. Here's one I prepared earlier:

And here is the same image without the video filter for comparison:

How to add the video filter

It's really easy, all you need to do is wrap your image in a div and include three spans after the image. Here is what the HTML looks like: (Note I've given the div a class of 'crt' - cathode-ray tube)

Support for IE 6 and below

You didn't think it would be that easy did you? We have old versions of Internet Explorer to deal with! IE6 and older versions do not support alpha transparency in png images so we're going to disable the top and bottom shadow for those poor users. To do that, we will expose an IE-only stylesheet using IE conditional comments. Make sure you include it after the main stylesheet. Here's the HTML:

Lets take it further and reduce the quality ;)

If fuzzy pixelation is not enough for you, then let's add some bad reception just for fun.

To do that I'm going to add another span with a snowy animation crt-snow.gif.

I'm also going to use a link instead of a div and allow the snow to be turned off when you hover over the image. Unfortunately for IE6 users, the hover won't work, so you will be stuck with bad reception forever unless of course you upgrade your browser.