By the looks of it these clever guys at you tube use a ‘master’ transparent gif with all of their icons on it. This in itself is not how the effect is achieved but I did find the method quite interesting.
You tube do some 1pixel image technique to force the <a> tag to the top. I’m not going to go into how this works but for the example it’s not really important. The simple way to achieve this would be to have a css class which places the ‘master’ transparent gif as the background image and width/height dimensions to match the required icon, for the <a> this changes on :hover (pseudo class). You can then position the <a> tag over the image tag using negative margins or absolute positioning.
A simplified version of the markup and style might look like this:
Markup
<img class="vimg120" alt="video" title="The Little Girl Who Was Forgotten" src="http://i3.ytimg.com/vi/rLz1xyFMMCQ/default.jpg"/><a title="Add Video to QuickList" class="QLIconImg"></a>
note it’s the class that is important here
CSS
a.QLIcon {
margin:-25px 0 0 -200px;
height:25px;
width:25px;
background:transparent url(http://s.ytimg.com/yt/img/master-vfl62437.gif) no-repeat scroll -537px 4px;
}
a.QLIcon:hover {
background-position:-562px 4px;
}
This achieves a quick way to change the appearance of the background image without loading any more data, as the whole icon set is saved in the browser cache.
Here is a good explanation of the technique: http://www.wellstyled.com/css-nopreload-rollovers.html
If you don’t already use this setup I would highly recommend it for web development - Firefox with the Firebug Add On installed, it has saved me so much time and hairloss it’s fantastic.
Web developer toolbar add-on for FF is also immensely useful too.
