任意のカラーで画像にマスクをかけ、マウスホバーでフェードアウトさせる

Result

jQuery

(function($) {

    var _options = new Array();
    var _itemId = 0;

    jQuery.fn.MyFadeOverImage = function(options) {
        _options[_options.length] = $.extend({}, $.fn.MyFadeOverImage.defaults, options);
        
        var idx = _options.length-1;
        var opt = _options[idx];
        //ラップしてマスクをかける
        $(this).each(function(){
            $(this).attr("idx", idx);
            $(this).fadeTo("fast", opt.normalAlpha);
            $(this).wrap("<DIV class=tongBg></DIV>");
            
            $(this).parent().css("background", opt.normalToneColor);
            $(this).parent().css("width",  opt.imageWidth+"px");
            $(this).parent().css("height",  opt.imageHeight+"px");
            //ホバーとホバーアウト時のフェードエフェクト
        }).mouseenter(function(){
            $(this).stop();
            $(this).fadeTo(_options[idx].fadeInSpeed, _options[idx].hoverAlpha);            
        }).mouseout(function(){
            $(this).stop();
            $(this).fadeTo(_options[idx].fadeOutSpeed, _options[idx].normalAlpha);
        });
    }

    jQuery.fn.MyFadeOverImage.defaults = {
        normalAlpha:0.8,
        hoverAlpha: 1,
        normalToneColor:"#000",
        fadeInSpeed: "1000",
        fadeOutSpeed: "1000"
    };

})(jQuery);
//セレクタとそれぞれの設定
$("div.demo01 img").MyFadeOverImage({
  normalAlpha:0.5,
  hoverAlpha: 1,
  normalToneColor:"#cbf5f5"
});

$("div.demo02 img").MyFadeOverImage({
  normalAlpha:0.3,
  hoverAlpha: 1,
  normalToneColor:"#cece8c"
});

$("div.demo03 img").MyFadeOverImage({
  normalAlpha:0.5,
  hoverAlpha: 1,
  normalToneColor:"#ce8c8c"
});

$("div.demo04 img").MyFadeOverImage({
  normalAlpha:0.6,
  hoverAlpha: 1,
  normalToneColor:"#ff8040"
});

css

.demoImgDiv , .tongBg
{
    margin:5px;
 
}
.demoImgDiv 
{
    
    padding-left:40px;
}
.demo{margin-bottom:20px;clear:both;}
.tongBg
{
    background:#000;
    float:left;
}

img
{
    border:0px;
    cursor:pointer;
    width:150px;
}

html

<div class="demo02 demo">
    <img src="01.jpg">
    <img src="02.jpg">
    <img src="03.jpg">
</div>

via

My Fade Over Image Demo (by KFSoft)