任意のカラーで画像にマスクをかけ、マウスホバーでフェードアウトさせる
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)