Question

I am using Twitter bootstrap, for an image gallery :

<ul class="listing">
    <li class="listing-box row-fluid">
        <div class="span4">
            <img class="thumb_zoom" src="/images/Kh.jpg">
        </div>
        <div class="article span8">
            Random text
        </div>
    </li>
</ul>

I am using a greyscale effect on all the images, and I want to make the colors appear when hovering the <li> , so I am using the following CSS :

.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%);
}

It works fine but all the images become colored when I hover the first li !
I want the color to appear on the image of the corresponding li I am hovering
I did some research and found that :

.listing:hover > .thumb_zoom {

But it’s not working.

Answer 1

Try

.listing-box:hover .thumb_zoom {

You’re applying that currently to the UL which is why they all change colors.