CSS for mouse to zoom in or show hidden content simple prototype

Adjust to the image Magnifier effect, or move the mouse to show hidden content (IE6 hover support is not perfect, recommended in Firefox or Google watch).

Effect

Css:

. demo {
width:318px;
margin:100px Auto 0 auto;
}

. demo:after {
Content: "";
Display:block;
height:0;
Clear:both;
}

. demo Li {
width:100px;
height:100px;
border:1px solid #e5e5e5;
Background: #fafafa;
Float:left;
margin:2px;
List-style-type:none;
position:relative;
Z-index:1;
}

. demo Li:hover {z-index:2;}

. demo Li:hover div {display:block;}

. demo Li Div {
width:204px;
height:204px;
border:1px solid #e5e5e5;
Position:absolute;
Top: -51px;
Left: -51px;
Display:none;
Background: #fafafa;
}

Html:

<ul class= "Demo" >
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
</ul>

CSS for mouse to zoom in or show hidden content simple prototype