Website images video effect with CSS

by Matthew James Taylor on 15 July 2009

Make website images look like a video with this CSS effect

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:

Last FM video image

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:

A rainbow image turned into a video

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

A standard rainbow image

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)

<div class="crt">
	<img src="image.jpg" width="300" height="400" alt="Video Image!" />
	<span class="screen"></span>
	<span class="top"></span>
	<span class="bottom"></span>
</div>

The CSS is a little more complicated but you can download my video image CSS to save some time.

.crt {
	float:left;
	position:relative;
	overflow:hidden;
}
.crt img {
	display:block;
	float:left;
}
.crt span.screen {
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:1000px;
	height:1000px;
	background:transparent url(crt-screen.gif) top left repeat;
}
.crt span.top {
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:1000px;
	height:70px;
	background:transparent url(crt-top.png) top left repeat-x;
}
.crt span.bottom {
	display:block;
	position:absolute;
	left:0;
	bottom:0;
	width:1000px;
	height:110px;
	background:transparent url(crt-bottom.png) bottom left repeat-x;
}

You will also need to download three images; crt-screen.gif, crt-top.png, and crt-bottom.png. These images make up the pixel pattern plus the top and bottom shadow.

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:

<!--[if lt IE 7]>
	<link rel="stylesheet" type="text/css" href="crt-ie.css" media="screen" />
<![endif]-->

Download the IE-only stylesheet here, it's very simple:

.crt span.top,
.crt span.bottom {
	display:none;
}

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. Here it is in all it's fuzzy glory:

Nice! That's really bad quality now. Here's the amended HTML with the extra span:

<div class="crt">
	<img src="image.jpg" width="300" height="400" alt="Video Image!" />
	<span class="snow"></span>
	<span class="screen"></span>
	<span class="top"></span>
	<span class="bottom"></span>
</div>

And here is the complete CSS file with the extra bits for the snow animation layer:

.crt {
	float:left;
	position:relative;
	overflow:hidden;
}
.crt img {
	display:block;
	float:left;
}
.crt span.screen,
.crt span.snow {
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:1000px;
	height:1000px;
	background:transparent url(crt-screen.gif) top left repeat;
}
.crt span.snow {
	background:transparent url(crt-snow.gif) top left repeat;
}
.crt:hover span.snow {
	display:none;
}
.crt span.top {
	display:block;
	position:absolute;
	top:0;
	left:0;
	width:1000px;
	height:70px;
	background:transparent url(crt-top.png) top left repeat-x;
}
.crt span.bottom {
	display:block;
	position:absolute;
	left:0;
	bottom:0;
	width:1000px;
	height:110px;
	background:transparent url(crt-bottom.png) bottom left repeat-x;
}

That's it for now. You can download my video effect demo (crt.zip) that includes all the files mentioned above if you want to experiment with it. Have fun. - Matt =)


Follow me on Twitter @mattjamestaylor

Enjoy this article?

If you find my website useful, feel free to donate any amount you wish. It will help pay for my hosting! =)

Matthew James Taylor