question about image transforming

I want to make a picture (like preview thumbnail) to have a white mask over it, while the mouse is over the picture , the mask fade out.

I set the opacity of the image to about 60 with white background to get the white mask effect , but i don’t know how to transform it (fade it out).

i try to use the following code :
onmouseover=”this.filters.alpha.opacity = 100;”
onmouseout=”this.filters.alpha.opacity = 60;”
it does make the mask effect, but it immediately remove the mask which is not fading it out.

then i try to use the following code :
onmouseover = ‘ this.style.filter=”progid?XImageTransform.Microsoft.Fade(Overlap=1.00,duration=2.0) alpha(opacity=0,style=0)” ‘
onmouseout = ‘ …….. ‘
but it doesn’t work ……..
i found that the opacity setting is done immediate but not waiting for the filters.fade.play() to trigger it to transform.

i don’t want to use two images cross fading to make this effect , i only want to use one image to do it.
is there any way to do it ??

Also in #JavaScript _↴