illusion effect

by Ashish Mishra

HTML

<h1>illusion Effect</h1>
<div id="illusion">
 <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>
</div>

CSS

body{ width:100%; height:100%;background-color:#000;color:#333;text-align:center;font-size:40px}
#illusion{ position:absolute;top:50%; left:50%; width:230px;height:230px;
    margin:-115px 0 0 -115px;}
#ver{ width:230px; 
    height:230px; 
    position:absolute;
    z-index:0;
    left:0px;top:0px;
    }
#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}