Finished Product: Layered Links (CSS) (http://www.designsbyvishal.com/portfolio/demos/css/layered-links.html)
First, it's important not to get overcomplicated with the markup. If you organize things correctly, you should be able to achieve your goal through CSS. Most of the timee the bare minimum is all that is needed.
In this case this means:
1) A background image
2) A "play" icon
3) A container div to house them both in.
<div id='container'>
<a href='#'><img class='image' src='image.jpg'></a>
<a href='#'><img class='play' src='play.jpg'></a>
</div>
Now the CSS:
1. Hide the Play Button
#container
{
width:480px; /* Width of image */
height:272px; /* Height of image */
padding:0px;
overflow:hidden;
}
This makes the container div the exact size of the image. Since the image is on top of the play button, the play button is not shown (but does exist beneath the image).
2. Set an :hover state to the image to display the play button when we hover over the image. Basically, we're going to add a negative margin to bring up whatever is underneath:
img.image
{
margin:0px;
padding:0px;
}
a:hover img.image
{
cursor:pointer; /* Hand cursor so people know it's a link */
margin-bottom:-32px; /* Remove margin thereby showing the icon */
*margin-bottom:-36px;
}
Note: I did some tweaking for IE. The bottom margin is the height of the play button plus a few to allow for a margin.
3. If you test now, it won't do anything. Even with a negative margin, the play button can only move up as high as the element above it will allow. In other words, the play button can't overlap, unless we change it's positioning
img.play
{
text-align:right;
position:relative;
top:0px;
float:right;
margin-right:3px;
}
4. Now, when you hover over the image, the play button should appear. But if you mouse onto the play button, it starts flickering. This happens because once you mouse over the play button, you're no longer hovering over the image. Since you're not hovering over the image, the negative margin dissapears. And as soon as that margin dissapears, you're back on top of the image, which again displays the play button. And so on, and so forth...
So to fix that, we set a top offset to the hover state of the play button.
a:hover img.play
{
cursor:pointer;
top:-32px; /* Increase top offset to account for margin differences */
*top:-36px;
}
That's it...it should work now.
Full code:
<html>
<style>
body { text-align:left; background:black; }
img { border:none; padding:0; margin:0; }
#container
{
width:480px; /* Width of image */
height:272px; /* Height of image */
padding:0px;
overflow:hidden;
}
img.image
{
margin:0px;
padding:0px;
}
a:hover img.image
{
cursor:pointer; /* Hand cursor so people know it's a link */
margin-bottom:-32px; /* Remove margin thereby showing the icon */
*margin-bottom:-36px;
}
img.play
{
text-align:right;
position:relative;
top:0px;
float:right;
margin-right:3px;
}
a:hover img.play
{
cursor:pointer;
top:-32px; /* Increase top offset to account for margin differences */
*top:-36px;
}
</style>
<body>
<div id='container'>
<a href='http://www.designsbyvishal.com'><img class='image' src='image.jpg'></a>
<a href='http://www.google.com'><img class='play' src='play.jpg'></a>
</div>
</body>
</html>