[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

[kseso?]

No hay concordancia entre el html y el css
Pero creo que lo podría lograr posicionando la imagen superior (en el eje z) de forma absoluta y al :hover sobre el div contenedor* ocultarla con |display: none| para que el enlace quede accesible y reciba el foco del puntero.

* problema si da soporte a ie6, pues sólo acepta el :hover sobre enlaces. Lo podría solucionar con un cambio de enfoque: alojando las 2 imágenes en el mismo enlace (una de ellas dentro de su span correspondiente). Siempre que no pueda actuar vía background.