将图像从黑暗变为悬浮

我正在寻找某种脚本，它将在某个div.class内的某个页面上选择所有图像，将透明的黑色阴影应用于它，然后将其淡入淡出徘徊。有谁知道这样做的系统？我无法真正修改网站本身（http://cargocollective.com/maureengriswold），或者我已经想出了一些劣质的做法。将图像从黑暗变为悬浮

来源

2012-01-29 Salem

通常，您将通过把一个黑色的背景图像和设定后面的图像的不透明度为某个值< 1.

在您的网站做到这一点，你将添加以下CSS：

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

.cardimgcrop img { 
    opacity: 0.7; 
} 

.cardimgcrop img:hover { 
    opacity: 1; 
}

UPDATE：

如果你想要一个动画的衰落，你就离开了:hover CSS定义，并添加以下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's answer建议），但你需要采取的浏览器功能的护理。

来源

2012-01-29 23:26:39

完美，这工作得很好。没有想到使用不透明。赞扬你们两个。 – Salem 2012-01-30 21:09:26

不完全确定透明的黑色阴影是什么意思，但我认为你的意思是像一个面纱的效果，它提升悬停和返回mouseout？

你完全可以用css来达到这个效果。事情是这样的：

DIV.myClass{ 
    -moz-transition-property: background-color; 
    -moz-transition-duration: 2s; 
    background-color: rgba(0,0,0,0.6); 
} 
DIV.myClass:hover{ 
    -moz-transition-property: background-color; 
    -moz-transition-duration: 2s; 
    background-color: rgba(255,255,255,1);

你要玩的确切CSS达到你想要的效果，又你要在不同的浏览器如CSS过渡的支持，以测试不是100％。

您可以在MDN文档站点阅读CSS Transitions的更多内容。

来源

2012-01-29 22:56:16 Howard

注：没有必要使用'-moz-transition'了，火狐现在支持只是'transition'，也可以工作在Chrome 26+，IE10 +和Opera。 Safari和Chrome 25-虽然仍然需要'-webkit-transition'。 – Anderson 2013-06-10 16:57:01

CSS滤镜是另一种选择http://html5-demos.appspot.com/static/css/filters/index.html

来源

2015-12-27 05:10:20 dman

将图像从黑暗变为悬浮

回答

相关问题