Suavizar abertura de div escondida

Bom eu queria suavizar uma div, que ao passar o mouse por cima ela abra suavemente..

codigo javascript que estou usando

function mostrarElemento(id, visibilidade) {
	document.getElementById(id).style.display = visibilidade;
}

agr o css

.prodImagem {
 width: 200px;
 height: 150px;
 background-color:#000000;
 display: none;
	filter:alpha(opacity=50);
	opacity:0.5;
 position: absolute;
 color: white;
 padding: 5px;
	border-radius: 5px;
	box-shadow: 3px 3px 3px #888888;
}

e codigo html

	<a href="#" onMouseOver="mostrarElemento('img1', 'inline');" onMouseOut="mostrarElemento('img1', 'none');">Produto 001</a>
	<div id="img1" class="prodImagem">VIP <img src="images/elusart2.jpg" alt="img1" /></div>

o que eu poderia fazer para suavizar abertura dela?