Passsar mouse sobre imagem e exibir uma outra imagem ao lado

Olá a todos

Tenho uma dúvida, e espero que alguém possa me ajudar.

Preciso criar a seguinte situação: São 4 imagens do lado esquerdo e do lado direito, uma maior que mudará quando passar o mouse sobre as imagens do lado esquerdo, como exemplifico na imagem abaixo:

/applications/core/interface/imageproxy/imageproxy.php?img=http://oi57.tinypic.com/t71no0.jpg&key=355ec21f516116a92faf47052e0d613b740020a7885db19f367846b3a78dc060" alt="t71no0.jpg" />

Tenho o seguinte código, mas ele esta exibindo a imagem em cima da outra:

<div id="cf">
 <img class="bottom" src="imagem1.jpg" />
 <img src="imagem2.jpg"/></td>
</div>
<style>
#cf {
 position:relative;
 height:300px;
 width:347px;
 margin:0 auto;
}

#cf img {

 position:absolute;
 left:0;
 -webkit-transition: opacity 1s ease-in-out;
 -moz-transition: opacity 1s ease-in-out;
 -o-transition: opacity 1s ease-in-out;
 transition: opacity 1s ease-in-out;
}

#cf img.top:hover {

 opacity:0;
}
</style>