Option sur css

<img href='chemin_mon_image' id='image' style='opacity: 1;' />

		<script type="text/javascript">
var image = document.getElementById('image');

function anim() {

    var s = image.style,
        result = s.opacity = parseFloat(s.opacity) - 0.1;
  
    if ( result > 0.2 ) {
        setTimeout(anim, 50); 
    }

}
function anim2() {

    var s = image.style,
        result = s.opacity = parseFloat(s.opacity) + 0.1;
  
    if ( result  <1 ) {
        setTimeout(anim2, 50); 
    }

}
image.onmouseover =function(){anim();}
image.onmouseout = function(){anim2();}
</script>

<div id='divImg'>
<img src='image.jpg' id='image' alt='image' />
<div id='fonce'></div>
</div>

#divImg {
position: relative;
height : hauteur de ton image en px;
width: largeur de ton image en px;
}
#fonce {
position: absolute;
top: 0px;
left:0px;
background-color: black;
opacity: 0;
height:100%;
width:100%;
}
#fonce:hover {
opacity:0.5;
}