While I’m visiting Komodomedia, there is an interesting small unique thing I ever found. It’s a Last.fm bar on the footer of page which is decorated as the CDs! Is it fancy though? Did you wondering how to make it? No, he didn’t draw it on Photoshop. It’s a CSS trick, I don’t know the exactly trick used by Rogie and thanks to him, but all we need it’s an empty span floating over the cover art and apply the background image overlay. This trick has been tested on most popular browser: Firefox, Safari, Opera, Internet Explorer 7 even Internet Explorer 6. Continue to read the rest of this article to find out how and if you already knew how to do it or just have a better solution, feel free to leave a comment.

Check out the demo or Download demo ZIP

How does this work?

The trick is “simple enough”. Basically we are just doing PNG alpha transparency overlay over the cover art. So the first thing we need to find the right CD image or you may also draw by your own. Don’t forget to make it transparent enough until you can see the cover art behind the CD, whatever the size you like but keep it feet the cover art. I have drawn it and the PSD also included in Download demo ZIP, so you can change the background color as you need.

The Markup

It’s just like usual floating unordered list block, but add a <span> before after the image add a &nbsp; inside to make it semantic.

<li>
  <a title="Dido: No Angel" href="http://www.last.fm/music/Dido/No+Angel">
    <img src="http://userserve-ak.last.fm/serve/126/16070125.jpg" alt="cover" width="80" height="80" /><span> </span>
  </a>
</li>

We use that span in order to overlay the cover art with the PNG background.

Styling

The key is a { position: relative; } and a span { position: absolute; }.

#music a {
  position: relative;
}
#music a span {
  background: url(images/cd.png) left top no-repeat;
  position: absolute;
}

You may check out the demo.

PNG color correction on IE 6/7

Since IE considered gamma for PNG, the image and background color looks different. I have tried the scripting way to fix it but doesn’t work so the next solution is TweakPNG. Just open your file with TweakPNG, remove the gamma metadata and save.

Make it work on IE 6

You may leave this section if you won’t care about IE6 user.

1. PNG alpha transparency

Here we go again the legendary lack of IE 6, the PNG alpha transparency on PNG-24. I’m using IE PNG Alpha Fix v 1.0 by TwinHelix and add the following piece of code. Well simply just add this piece of code to the Stylesheet:

<!--[if lt IE 7]>
<style type="text/css">
#music a span {
  background: none;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/cdoverlay.png', sizingMethod='crop');
} 
</style>
<!--[endif]-->

In case you want to use other script, I tried few jquery plugins in purpose for PNG fix like jquery.pngFix.js by Andreas and IE PNG Fix by Paul but somehow it don’t work at all while handling the background on mouse over event. The last one is jQuery.ifixpng by Kush M and it’s work!

Why if block instead of * html #music a span { … }? The CSS will be a valid one.

2. Handling the mouse over event

IE 6 doesn’t recognize the Element hover (mouse over) event except for a Link, so required to add javascript stuff a little more CSS tricks for it. I’m done with helped by jQuery the great Paul Boutin’s advice. Here is it the detail explanation:

First we make the <a> and <span> have a fixed width as the background we have.

#music a,
#music a span {
  display: block;
  width: 80px;
}

Make the <a> have a fixed height to feet the background we wish to overlaying and mark the height property as important to force the element feet into the height, optionally we may also add overflow property as hidden to avoid element overflow.

#music a {
  height: 80px !important;
  overflow: hidden;
}

Here we make the <span> fixed to the “real” background height and place it absolutely at the top left of parent element (<a>).

#music a span {
  top: 0;
  left: 0;
  height: 160px;
}

Now we’re about to handling the hover event. At the a:hover we need to set the background position to left-bottom, so when mouse over triggered the background move to bottom position and display our second background. But we need also shift the span position to blind spot area in order to make our second background visible. See how important the previous steps?

#music a:hover {
  background-position: 0 bottom;
}
#music a:hover span {
  top: -80px;
}

This is the illustration about what happened above.

Credit to Paul Boutin, thanks.

The last thing

Another IE problematic, the cursor won’t change to hand when you move to the CD link so we need to add another line to the stylesheet

<!--[if IE]>
<style type="text/css">
#music a span {
  cursor: hand;
}
<!--[endif]-->

Limitations

• IE PNG hack and javascript stuff is required to make it fully work on IE 6.
• TweakPNG is required to remove the gamma metadata in order to archived the color correction on IE.
• For the best result you need to discovering over the image transparency before applying the background image overlay.

I’m apologized about my poor english. Just leave a comment if you have a question, I will try my best to answer it.