Simulate image "overlay" with CSS

Question

Basically I'm trying to simulate Photoshop's image overlay thing using images and CSS for a menu.

There are 2 versions of the menu background image: one is the normal state (pink), and one the active state (blue). The entire menu is wrapped in a DIV with the normal (pink) image as background.

How can I make it so each active menu link uses the corresponding slice of the blue image?

Like this:

My code so far

Do you think this is possible with CSS?

Answer 1

CSS Only solution for modern browsers:

ul {
    background-color:#ff00ff;
    background-image: -moz-radial-gradient(50% 50%, ellipse closest-side, #ffffff 0%,#ff00ff 110%);
    background-image: -webkit-radial-gradient(50% 50%, ellipse closest-side, #ffffff 0%,#ff00ff 110%);  
    background-image: -o-radial-gradient(50% 50%, ellipse closest-side, #ffffff 0%,#ff00ff 110%);
    background-image: -ms-radial-gradient(50% 50%, ellipse closest-side, #ffffff 0%,#ff00ff 110%);
    background-image: radial-gradient(50% 50%, ellipse closest-side, #ffffff 0%,#ff00ff 110%);
    height:50px;
    width:400px;
    margin:0;
    padding:0;
    border-radius:25px;
    overflow:hidden;
}

li {
    width:100px;
    height:50px;
    float:left;
}

li:hover {
    background-color:rgba(0,0,255,0.2);
}

Click to see a working demo: http://jsfiddle.net/AlienWebguy/ZLg4B/

Answer 2

If you need to support older browsers and can't use css3, there is a number of ways to do this. One of them:

You can cut out the blue image of the entire thing (you can actually make it wider)

then

li.active {
    background: url('path/to/yourImage.png') no-repeat -50px 0;
    /* 50px or however wide that rounded tip is */
}

li.active.first {
    background-position: left top;
}

li.active.last {
    background-position: right top;
}
/* you'll need to add 'active', 'first' and 'last' classes accordingly. */