Question

I have 6 images, on hover each image gets replaced by another image which fade up (with jQuery) and gets upon the initial image.

The issue is that when the image fade up, it gets under the original image and not over it.

Since the fade in/out effect works fine, i think this issue belongs to my css code:

CSS:

#puzz {
    border-color:#000000;
    background-color:#00CC33;
    position:fixed;
    left:20%;
    top:13%;
    width:900px;
    height:650px;
}
li {
    list-style:none;
    float:left;
    list-style:none;
    padding:8px;
    margin:10px;
    line-height:10px;
    width:218px;
    height:218px;
    overflow:hidden;
    background:#99CCFF;
    /*For IE9 compatibility*/
    behavior: url(border-radius.htc);
    border-radius: 8px;
}
.fade div {
    position:absolute;
    top:auto;
    left:auto;
    display: none;
}

HTML:

<div id="puzz">
    <ul>
        <li>
            <div class="fade"><img src="img7.jpg" />
                <div><img src="img8.jpg" /></div>
            </div>
        </li>
        <li>
            <div class="fade"><img src="img2.jpg" />
                <div><img src="img5.jpg" /></div>
            </div>
        </li>
        <li>
            <div class="fade"><img src="img3.jpg" />
                <div><img src="img4.jpg" /></div>
            </div>
        </li>
        <li>
            <div class="fade"><img src="img4.jpg" />
                <div><img src="img3.jpg" /></div>
            </div>
        </li>
        <li>
            <div class="fade"><img src="img5.jpg" />
                <div><img src="img2.jpg" /></div>
            </div>
        </li>
        <li>
            <div class="fade"><img src="img6.jpg" />
                <div><img src="img1.jpg" /></div>
            </div>
        </li>
    </ul>
</div>

Here is what i get:

EDIT:

here is jQuery script i use:

$(document).ready(function () {
    // find the div.fade elements and hook the hover event
    $('div.fade').hover(function () {
        // on hovering over, find the element we want to fade *up*
        var fade = $('> div', this);    

        // if the element is currently being animated (to a fadeOut)...
        if (fade.is(':animated')) {
            // ...take it's current opacity back up to 1
            fade.stop().fadeTo(250, 1);
        } else {
            // fade in quickly
            fade.fadeIn(250);
        }
    }, function () {
        // on hovering out, fade the element out
        var fade = $('> div', this);
        if (fade.is(':animated')) {
            fade.stop().fadeTo(3000, 0);
        } else {
            // fade away slowly
            fade.fadeOut(30);
        }
    });
});

Answer 1

Here’s your code (jsFiddle), with your problem fixed.

I just made a few changes in the CSS to place the a image “above” the other.