Efeito Lupa Lista

Mostra uma lupa em uma lista de imagens por exemplo.

HTML

<div id="lista">           
    <ul>                
        <li>
            <a href="#1">
                Conteudo da lista 
            </a>
        </li>                
        <li>
            <a href="#2">
                Conteudo da lista 
            </a>
        </li>                
        <li>
            <a href="#3">
                Conteudo da lista 
            </a>
        </li>                
        <li>
            <a href="#4">
                Conteudo da lista 
            </a>
        </li>                
    </ul>            
</div>

CSS

*{list-style: none; padding:0px; margin:0px; font:12px Arial;}            
#lista{
    width:400px;
    margin:0 auto;
}            
#lista ul li{
    padding:10px;
    position:relative; 
    float:left;
    width:140px; 
    height:100px;
    text-align: center;
    margin:6px;
    cursor:pointer;
    -webkit-box-shadow: 1px 1px 5px 1px #333;
    -moz-box-shadow: 1px 1px 5px 1px #333;
    box-shadow: 1px 1px 5px 1px #333; 
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;    
}
.sombra{
    background:#333; 
    opacity:0.7;
    width:100%;
    height:100%; 
    position:absolute; 
    top:0; 
    left:0;
    display:none;
    z-index: 2;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;       
}
.lupa{
    background:url(http://andrewd.com.br/fade/lupa.png) center center no-repeat; 
    width:100%;
    height:100%; 
    position:absolute; 
    top:0; 
    left:0;
    display:none;
    z-index: 3;
}