webkit-filter greyscale with overlaying DIV

Question

I have an issue with a greyscale filter over a background image on a div http://jsfiddle.net/wZvjH/3/ which on hover .bg changes to color.

However, why is the .left1 and .left2 in greyscale too even though i have a z-index applied? that wasn't the plan. How can i solve this?

Answer 1

If you apply a filter to an element, that filter applies to all its children too. There's no way to turn that off. You'd need to move the left and left2 out of the hierarchy such that they are siblings of the main <div> if you don't want the filter applied on them.