在無序列表圖像上應用灰度

什麼是最簡單的方式來將我的3張圖像淡入灰色圖像中。這是爲了我的頁腳。在無序列表圖像上應用灰度

這裏是我的html代碼：

<ul class="review-icons"> 
    <li><a href="http://www.tripadvisor.ca/Restaurant_Review-g154943-d708757-Reviews-Balilicious-Vancouver_British_Columbia.html" target="_blank"><img class"grayscale" src="http://dev.baliliciousrestaurant.com/wp-content/uploads/2013/12/social-trip-advisor.jpg" alt="Trip Advisor" height="26" width="26"> 
     </a> 
    </li> 
    <li><a href="http://www.urbanspoon.com/r/14/181587/restaurant/South-Cambie-Street/Balilicious-Modern-Indonesian-Vancouver" target="_blank"><img class"grayscale" src="http://dev.baliliciousrestaurant.com/wp-content/uploads/2013/12/social-urban-spoon.jpg" alt="Urbanspoon" height="26" width="26"> 
     </a> 
    </li> 
    <li><a href=http://www.yelp.ca/biz/balilicious-modern-indonesian-vancouver?nb=1" target="_blank"><img class"grayscale" src="http://dev.baliliciousrestaurant.com/wp-content/uploads/2013/12/social-yelp.jpg" alt="Trip Advisor" height="26" width="26"> 
     </a> 
    </li> 
</ul>

我的CSS迄今：

ul.review-icons > li { 
display: inline; 
list-style: none; 
margin: 15px; 
top: 5px; 
position: relative; 
}

是什麼樣子的小提琴： http://jsfiddle.net/FLBRG/2/

**額外的 - 有可能是灰度從下到上滾動

Plz ÑTHX

來源

2013-12-10 user2959484

用JS控制上懸停事件替換圖像。你應該有這樣的灰色圖像。 – mayaa

一個簡單的方法（但取決於你的背景顏色爲白色）：

ul.review-icons > li:hover { 
    opacity: 0.5; 
}

來源

2013-12-10 02:36:14 carpeliam

在無序列表圖像上應用灰度

回答

相關問題