將鼠標懸停在圖片上

Question

我在Joomla製作一個網站。

而在我的頭版我有一些圖像，這是鏈接。

我希望這些圖像a可以獲得略帶綠色的效果，如不透明度+綠色和stil具有下面的原始圖像。

這是可能做的只有CSS？

我可以得到工作的不透明度，但不是綠色。

希望有人能幫助我。

Here is my site. it is the the small images under "Referencer" and "Nyheder"

Answer 1

您將無法做你想做的純CSS輕鬆。 CSS中沒有「覆蓋」。您可以操縱背景顏色/不透明度，但圖像始終位於頂部，因此無法達到您想要的效果。

你需要做的是將圖像作爲A的背景，然後改變背景做一個與已經應用的效果相似的圖像。圖像很小，所以你可以很容易地使他們精靈與過度看在同一圖像。我在我公司網站頂部的社交圖標上做了這個 - http://www.bnrbranding.com/

Answer 2

這是可以用CSS實現的。主要技巧是當前鏈接不包圍img塊，因爲它們的顯示類型是內聯的。

假設下面的HTML：

<a href="#" class="greenish"><img src="..." /></a> 

這是你需要的CSS：

a.greenish { 
    background: green; 
    display: inline-block; 
} 
a.greenish img { 
    opacity: 0.5; 
} 

調節綠色和不透明的味道，很明顯。

查看此lovely jsfiddle爲例。請注意，這包括添加CSS，以防止您只希望它在盤旋時變爲綠色。