Image transition lightbox

bonjour ,

j'aimerai lors de mon clic que l'image que j'ai sélectionné s'ouvre avec une transition comme une lightbox.

voici mon code html

				<div id="content">
						<!--fichier js qui affichera les fichiers img-->

							<div class="block_gallery">
									<div id="img_gallery">
										<span></span>
										<div class="hoverIMG">
											<img src="./img/img004.jpg" alt="" id="gallery">
										</div>
									</div>
								<div id="list_information">
									<ul>
										<li>information 1</li>
										<li>information 2</li>
									</ul>
								</div>	
							</div>	
				</div>

		</div>
		<div id="overlay"></div>
		<div id="imgBIG"><img src="#" /><div id="closebox"></div></div>

<script text="javascript">
var tab = [
				{
					img: 'img004.jpg',
					imgtall: 'img004_tall.jpg',
					info1:'30/07/2011',
					info2:'information'
				}

				function imgclick(e){
					var overlay = document.getElementById('overlay');
					var index = parseInt(e.currentTarget.id);
					var wrapperImg = document.getElementById('imgBIG');
					var monImg = wrapperImg.getElementsByTagName('img')[0];
						monImg.src = 'img/'+ tab[index].imgtall;
					overlay.style.display = wrapperImg.style.display = 'block';

				function closebox(){
					var overlay = document.getElementById('overlay');
					var wrapperImg = document.getElementById('imgBIG');
					overlay.style.display='none';
					wrapperImg.style.display='none';
				}
</script>

voici mon css

#gallery{
	float:left;
	width: 190px;
	height: 300px;
	margin: 0px 15px;
	position:relative;

}

#content{
	width: 900px;
	height:auto;
}

#img_gallery{
	background-color: #000;

	/*float: left;*/
}

#block_gallery li {
	/*float:left;*/
	color:#fff;
}

#list_information {
	margin-top: 305px;
}

#list_information ul{
	background: #a2a2a2;
	height:45px;
	width: 210px;
	padding-left: 0px;
	text-align: center;
}

#list_information ul,li{
	list-style-type: none;
	text-decoration: none;
	display: block;
	position: relative;
	margin-top: 5px;
}

#list_information li:first-child{
	color:#fff;
	font-weight: bold;

}

#overlay{
		position:absolute;
		height:100%;
		width:100%;
		opacity:0.8;
		background-color:#000;
		top:0;
		left:0;
		z-index:0;
		display:none;
		text-align:center;
}
.block_gallery {
	width: 210px;
	height: 350px;
	box-shadow: 1px 1px 2px #bebdbc;
	border: 1px solid #bebdbc;
	background:#fff;
	display:inline-block;
	margin-right: 10px;
	margin-bottom: 10px;
}
		
	
#imgBIG {
	color: #FFF;
	display: none;
	position: absolute;
	width: 380px;
	height: 658px;
	left: 50%;
	top: 50%;
	margin-top: -329px;
	margin-left: -190px;
}

				function cloneIMG(){
					var mainblock=document.getElementsByClassName('block_gallery')[0];
					for(var i in tab){

						var object = document.getElementsByClassName('block_gallery')[0].cloneNode(true);
						var imgSOURCE = object.getElementsByTagName('img')[0];
						var information1=object.getElementsByTagName('li')[0];
						var information2=object.getElementsByTagName('li')[1];

						imgSOURCE.src = 'img/'+ tab[i].img;
						information1.innerHTML = ''+ tab[i].info1;
						information2.innerHTML = ''+ tab[i].info2;
						object.id = i;

						document.getElementById('content').appendChild(object);
						object.addEventListener("click",imgclick);
						overlay.addEventListener("click",closebox);
					}
					mainblock.parentNode.removeChild(mainblock);
				}

j'ai oublié de précisé ce ptit bout de code [/i][/i][/i]