1) CODE TITLE: Please help me fix overlay in IE (all version)

2) AUTHOR NAME/NOTES:

3) DESCRIPTION: problem in overlay

<script type="text/javascript">
function popuped(){
document.getElementById('overlay').className='fadein'; }
function fadeout(){
document.getElementById('overlay').className='fadeout'; }

</script>
<style type="text/css">
#overlay {
background-color:#6C0;
background-repeat:no-repeat;
width:850px;
height:550px;
position:absolute;
top:75px;
left:75px;;
z-index:-10;
opacity:0;
-webkit-transition : all 500ms ease-out;
-moz-transition : all 500ms ease-out;
-webkit-perspective : 200;
-mox-perspective : 200; }

#overlay.fadein
{ opacity : 1;
z-index:30; }
#overlay.fadeout { opacity : 0;
z-index:5; }
</style>
</head>
<body>

<img onclick="popuped();" src="images/gallery/tn_1.jpg" />

</body>
</html>

Hi friends : The overlay is not working in IE. I need a code to make the overlay work in IE. I have tried many codes from net, But it didnt gave me the solution. Please help me with this.