illusion effect

by Ashish Mishra

HTML

<div id='ver'>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
</div>
<div id='hor'>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
</div>
<div id='dot'>
     <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
</div>

CSS

body{ width:100%; height:100%}

#ver{ width:230px; 
    height:230px; 
    position:absolute;
    z-index:0;
    left:0px;top:0px;
    background-color:#000}
#ver a{ float:left;
    margin:10px; 
    width:5px;
    height:200px;
    background-color:#333}
#hor{ width:230px; 
    height:200px;
    position:absolute;
    z-index:1;
    left:0px;
    top:0px}
#hor a{ float:left;
    margin:10px;
    width:200px;
    height:5px;
    background-color:#333}
#dot{ width:230px;
    height:200px;
    position:absolute;
    z-index:2;
    left:0px;
    top:0px}
#dot a{float:left;
    width:5px;
    height:5px;
    background-color:#fff;
    margin:10px;
    border-radius:10px}