twitter facebook dribbble email

Listener question – PNG Overlays

Careful! This post is looking a little old and could be inaccurate in many, many ways

Recently I received an email asking how I achieved one of the effects I have used on my website, so rather than be evil and keep it to myself, or just reply to the one person I thought I’d make use of this blog I have and use it to publish the answer. The crux of the question was:

I was wondering if you would be willing to share your techniques for getting the LastFM list to display INSIDE the CD frame.

I actually use the effect a few times though the website, as well as the last.fm feed on my about page it is also used for the Flickr feed, email avatar previews and recently for the portfolio list items.

A Disclaimer

I’d love it if this technique was all my own idea and something original, but it’s not. I have seen it used in a few places but the main inspiration was from Jon Hicks who uses the technique for his own Last.fm feed (although it’s changed a little since I first saw it). I loved Jon’s idea of making the feed appear as Vinyl record sleeves and knew I wanted to try something similar, so as to not copy his style outright I swapped the idea of vinyls for CD’s.

In a Nutshell

For those who like puzzles I’m going to spell out the technique in a nutshell and leave it up to you if you go away and figure the rest out yourself or you can follow the instructions further below.

The technique is a simply the use of two images, positioned one above the other. Using PNG transparency on the top image you can control how much of the image below shows through and in what shape.

Like most CSS tricks they’re easy when you know how, but maybe not so much if you’ve not come across it before, so for those still stuck here’s the process broken down.

The Solution

The process can be used in many situations but I’m going to use the example of my last.fm feed to keep things simple. In all cases where you use this technique you will need access to the HTML being output, so if you are wishing to do the same to your last.fm feed and if it runs from a WordPress plugin you will need to edit the plugin.

The HTML

So as explained above we have two images the overlay png and the actual CD cover. The <a> tag is there to provide a link to the relevant page of last.fm and wraps the overlay image as the normal CD cover behind will not be clickable with the overlay image above. That’s it for the HTML, the rest comes from the CSS.

The CSS

The CSS works to place the PNG overlay above the CD image. Firstly the <li> is given a position:relative; this ensures when the <a> is positioned absolutely and given top and left positions that the position is determined from the parent <li> and not the body of the document.

This should be all that you need to make it work, if you need more help or if I’ve missed something then feel free to look at the source code or get in touch with me via the comments or twitter.