CSS3 fading imagemap

http://stackoverflow.com/questions/7533819/how-to-create-a-fade-transition-between-the-images-in-an-image-map-swap/7536701#7536701

HTML

<p>Move your mouse over <em>foo</em> or <em>bar</em>.</p>

<ul id="map">
    <li id="foo"><a href="#">Hello</a></li>
    <li id="bar"><a href="#">Goodbye</a></li>
    <li id="mask"></li>
</ul>






















<!-- ignore the rest -->
<label for="show-mask">Show the #mask image?</label><input type="checkbox" id="show-mask"><img src="http://i.imgur.com/S9Z7W.png">

CSS

/* The link "hotspot" itself--or rather its container. More properties 
 * below in "#map li" */
#foo { left: 35px; top: 35px; }

/* The "mask" image is a 700x700 PNG with a 100x100 (to match the size of the 
 * hotspots) transparent "hole" in the middle (see "li#mask" below). We
 * reposition it for each link on :hover. To get the right background-position
 * just add the left/top numbers above to -300 (the total width of
 * the "canvas").
 */
#foo:hover ~ #mask { background-position: -265px -265px }

/* Repeat for each link */
#bar { left: 160px; top: 160px; }
#bar:hover ~ #mask { background-position: -140px -140px; }

#map, #mask {
    width: 300px; height: 300px;
}

/* The "canvas" */
#map {
    border: 1px solid black;
    position: relative;
    background: url(http://i.imgur.com/zucgV.png) no-repeat;
}

/* Each hotspot has a <li> wrapper */
#map li {
    position: absolute;

    /* Each link is the same size but it doesn't have to be --
     * you would just need a separate #mask image for each size/shape.
     */
    width: 100px; height: 100px;
    z-index: 1;
}

/* The link itself--the same size as its <li> container */
#map a {
    color: transparent;
    display: block;
    position: absolute;
    width: 100px; height: 100px;
    z-index: 100;
}

/* The #mask is just an empty <li>. This is extraneous markup but
 * I couldn't think of a better implementation.
 */
li#mask {
    /* The same width/height as #map */
    width: 300px; height: 300px;
    background: url(http://i.imgur.com/S9Z7W.png) no-repeat;
    
    /* Set up our fade in/out transition. */
    -webkit-transition: opacity 0.2s ease-in-out, visibility 0s linear 0.2s;
    -moz-transition:    opacity 0.2s ease-in-out, visibility 0s linear 0.2s;
    -o-transition:      opacity 0.2s ease-in-out, visibility 0s linear 0.2s;
    -ms-transition:     opacity 0.2s ease-in-out, visibility 0s linear 0.2s;
    transition:         opacity 0.2s ease-in-out, visibility 0s linear 0.2s;
    
    /* It's...