Apply CSS image greyscale property to the parent only

[pkhimsri]

I am using Twitter bootstrap, for an image gallery :\[code\]<ul class="listing"> <li class="listing-box row-fluid"> <div class="span4"> <img class="thumb_zoom" src="http://stackoverflow.com/images/Kh.jpg"> </div> <div class="article span8"> Random text </div> </li></ul>\[/code\]I am using a greyscale effect on all the images, and I want to make the colors appear when hovering the \[code\]<li>\[/code\] , so I am using the following CSS : \[code\].thumb_zoom { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%);}.listing:hover .thumb_zoom { filter: grayscale(0%); -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%); -o-filter: grayscale(0%);}\[/code\]It works fine but all the images become colored when I hover the first \[code\]li\[/code\] !I want the color to appear on the image of the corresponding \[code\]li\[/code\] I am hoveringI did some research and found that :\[code\].listing:hover > .thumb_zoom {\[/code\]But it's not working.