[Ayuda, CSS] Imagen de sustitucion con alpha

[lumiz]

Hola bueno, yo tengo 2 imagenes como muestra el siguiente codigo:

Código HTML:

<div class="producto">
   <img src="img1.jpg" class="atras" width="168" height="175">
   <a href="#" title="">
        <img src="img2.jpg" class="adelante" width="168" height="175">
    </a>
</div>
 

Código CSS:

.producto {
    float: left;
    width: 168px;
    height: 260px;
    margin-right: 20px;
}
img.atras {
    margin: 0px;
    padding: 0px;
}
img.adelante {
    margin-top: -175px;
}
img.adelante:hover {
    filter:alpha(opacity=0);  
    -moz-opacity: 0;  
    opacity: 0;
    -khtml-opacity: 0;
}
 

La idea es que la img2 se ponga esactamente arriba de la 1 tapandola y cuando nos ponemos arriba de la 2 se aga transparence... el efecto funsiona lo que pasa es que depende el navegador la img2 se me corre...

alguna ayuda plis