在悬停时将图像从暗到亮变亮

Question

我正在寻找某种类型的脚本,它将选择某个div.class中页面上的所有图像,对其应用透明的黑色阴影,然后在悬停时将其淡出.有谁知道这样做的系统？我无法真正修改网站本身(http://cargocollective.com/maureengriswold)或者我已经想出了一些伪劣的方式.

Answer 1

通常,您可以通过在图像后面放置黑色背景并将图像的不透明度设置为某个值<1来实现此目的.

在您的网站上,您将添加以下CSS:

.cardimgcrop {
    background-color: black;
    border-color: white;
}

.cardimgcrop img {
    opacity: 0.7;
}

.cardimgcrop img:hover {
    opacity: 1;
}

更新:

如果你想要一个动画渐变,你将省略:hoverCSS定义并添加以下Javascript行(使用你网站上已经使用的jQuery 1.4.2):

$(document).delegate('.cardimgcrop img', 'mouseover', function() {
   $(this).fadeTo(500, 1);
});
$(document).delegate('.cardimgcrop img', 'mouseout', function() {
   $(this).fadeTo(500, 0.7);
});

当然,您也可以使用原生CSS转换来实现此效果(如Howard的回答中所述),但您需要注意浏览器功能.