將圖像從黑暗變爲懸浮

我正在尋找某種腳本，它將在某個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

將圖像從黑暗變爲懸浮

回答

相關問題