Bonjour à toi,
Alors c'est très simple, il te faut une div qui contient ton image et une div que tu identifie par une classe "cache"
Comme ceci en html :
<div class="vignette">
<img src="..." alt="..." />
<div class="cache"></div>
</div>
Ensuite dans ton css, il faut que ta div "vignette" soit en position relative et que ta div "cache" soit en position absolute afin qu'elle se positionne par rapport à la vignette.
Comme ceci en css :
.vignette{
...
...
position:relative;
}
.cache{
...
position:absolute;
top: 0;
left: 0;
background: url(...); //Le background correspond à ton masque
}
Ensuite grâce au javascript tu cache la div "cache" et tu gère les événements.
Comme ceci :
$(".vignette .cache").css("opacity",0);
$(".vignette").mouseover(function(){
$(this).find(".cache").stop().fadeTo(500,1);
});
$(".vignette").mouseout(function(){
$(this).find(".cache").stop().fadeTo(500,0);
});
Voilà bonne chance ;)