applying grayscale on unordered list images

Question

What is the simplest way to fade my 3 images into grayscale when hovered upon. This is for my footer.

Here is my html code:

<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>

my CSS so far:

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

what it looks like in fiddle: http://jsfiddle.net/FLBRG/2/

** extra - is it possible for the grayscale to scroll in from bottom to top

Plz n Thx

Answer 1

One easy way (but depends on your background color being white):

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