Oscurecer imagen con SUB IMAGEN

Tengo el codigo para que se oscurescan las imagenes al pasar el mouse el efecto es este:

Código :

#imagen {
filter:alpha(opacity=100);
opacity: 1;
moz-opacity:.1;
khtml-opacity:.1;
}
#imagen:hover
{
filter:alpha(opacity=30);
opacity: .3;
moz-opacity:.3;
khtml-opacity:.3;
}

Quiero tambien que al oscurecer le agrege una imagen algo asi:

la página en donde se muestra el codigo es WWW.PIXELBIT.COM.PE/SHOP

Hola, para empezar, no las oscureces en realidad las transparentes, ahora claro si tu fondo es negro pues si parecera que las oscureces, veo cierto errorcillo en tu codigo donde pones

Código HTML :

#imagen {
filter:alpha(opacity=100);
opacity: 1;
moz-opacity:.1;
khtml-opacity:.1;
} 

deberias poner

Código HTML :

#imagen {
filter:alpha(opacity=100);
opacity: 1;
moz-opacity: 1;
khtml-opacity: 1;
}

Ojo en moz-opacity y en khtml-opacity he quitado el . antes del 1 pues esto hacia que se interprete como 0.1 lo que te da solo un 10% de opacidad mientras las otras lineas para la misma etiqueta indicaban 100% de opacidad, para el efecto que aparezca el logo al pasar por encima de la imagen, puedes
1. aplicar un fondo que contenga tu logo y al bajar la opacidad de tu imagen podras ver el logo detras de la misma.
2. Usar jaascript y hacer que el logo aparezca al mismo tiempo que la imagen se transparenta y viceversa.

Bien, ya arregle el código pero cuando sacas el punto no funciona, asi que lo hice asi:

Código :

#imagen:hover
{
filter:alpha(opacity=30);
opacity:0.3;
moz-opacity:0.3;
khtml-opacity:0.3;
}

Si, desearia hacerlo en javascript, aunque me parece un poco complicado prefiero hacerlo asi.

Tienes alguna idea?