Conteúdo aparecer por cima de imagem

Olá pessoal...

Estou tentando fazer o conteúdo aparecer por cima de imagem ao passar o mouse nela, como acontece nos portais que passa o mouse na imagem e aparece o título da notícia...

Meu código está assim:

<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
$(document).ready(function(){

var todasSuasDivs = $("#conteudo"); // no css dela você deixa display: none;

 $("#imagem").hover(function(){ // seus objetos

 $(todasSuasDivs, this).fadeIn(); // ativa só a div do respectivo objeto

 },function(){

 $(todasSuasDivs, this).fadeOut();

 });

});
</script>

<style>

#imagem{z-index:0 !important;} #conteudo{color:#FFF; width:114px; height:188px; background:url(img/bg_info_projeto.png) no-repeat; position:absolute; margin-top:-188px; margin-left:25px; display:none;}

</style>

<div id="imagem" style="width:301px; float:left;">
<a href="#"><img src="img/projeto.png" alt="" /></a>

<div id="conteudo">
 Conteúdo
</div><!--conteudo-->

</div><!--imagem-->

<div id="imagem" style="width:301px; float:left;">
<a href="#"><img src="img/projeto.png" alt="" /></a>

<div id="conteudo">
 Conteúdo
</div><!--conteudo-->

</div><!--imagem-->

Porém, está funcionando na primeira div (imagem), e já na segunda em diante não funciona o efeito apenas no primeiro...

Alguém sabe como resolvo isto?

Aguardando respostas... :thumbsup: