CSS for mouse over picture matte effect

IE6 hover support is not perfect, so incompatible, it is best to watch in standard browser such as Firefox or Google. Demo download

Effect

Css:

#demo {
width:306px;
height:204px;
padding:3px;
border:1px solid #e5e5e5;
margin:100px Auto 0 auto;
Background: #fff;
}

#demo: After {
Content: "";
Display:block;
height:0;
Clear:both;
}

#demo: hover Li span {
Display:block;
}

#demo Li {
Float:left;
width:100px;
height:100px;
position:relative;
margin:1px;
}

#demo Li Span {
Display:none;
width:100px;
height:100px;
Background: #000;
opacity:0.35;
Position:absolute;
top:0;
left:0;
Overflow-y: none;
}

#demo li:hover span {display:none;}

Html:

<ul id= "Demo" >
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
</ul>

CSS for mouse cursor matte effect