css - Why does stacking order change on webkit filter hover?

Question

I've noticed a weird issue with my stacking order when applying a webkit filter. Why, when I hover over the image does the stacking order change?

I'd rather not have to use z-indexing to fix this, as it breaks other site elements.

Here's my JSFiddle http://jsfiddle.net/r13ycy1p/

Please excuse Homer, I just needed an image.

EDIT: How can I reverse the effects to stop the absolutely position div from being hidden?

Here's my HTML

<ul>
<li>
    <a href="#">
        <div class="slide-content">
            <div class="slide-title">
                <h1>hello world</h1>
            </div>
            <div class="slide-desc">
                <p>a description about something</p>
            </div>
        </div>
        <img src="http://img4.wikia.nocookie.net/__cb20130920142351/simpsons/images/e/e9/Pic_1187696292_8.jpg"/>

    </a>
</li>
</ul>

The CSS

li {
list-style:none;    
}

.slide-content {
position:absolute;
color:red;
top:50px;
}

li a:hover img{
-webkit-filter: grayscale(100%); /* For Webkit browsers */
}

Answer 1

This is because a value other than none establishes a stacking context. This is documented in the spec (which is currently in Working Draft status):

2 Module interactions

This specification defines a set of CSS properties that affect the visual rendering of elements to which those properties are applied; these effects are applied after elements have been sized and positioned according to the Visual formatting model from [CSS21]. Some values of these properties result in the creation of a containing block, and/or the creation of a stacking context.

Also the spec states:

5 Graphic filters: the filter property

A computed value of other than none results in the creation of a stacking context [CSS21] the same way that CSS opacity does.