Question

I’m trying to create a hover effect which brings the underlying div to the front.

Bringing the underlying div to the front is already solved through z-index. But my opacity change is causing blinking. It SHOULD stay at 0% when the user is hovering over it, then change back to 100% when they move their cursor off of it. Does anybody know what I’m doing wrong?

The underlying div is .under and the div on top is .img

#portfolio_content .img a { }
#portfolio_content .img a:hover { }
#portfolio_content .img {
    display:block;
    float:left;
    height:210px;
    margin:0 35px 35px 0!important;
    overflow:hidden;
    padding:0;
    width:307px
}
#portfolio_content .img img {
    display:block;
    position:absolute!important;
    overflow:hidden;
    z-index:3!important
}
#portfolio_content .img img:hover { z-index:1!important }
#portfolio_content .img .title, #portfolio_content .img .title a {
    font-size:22px;
    margin:100px 0 10px 0;
    float:left!important;
    width:307px;
    text-align:center;
    position:relative!important
}
.desc {
    font-size:13px;
    display:block;
    text-align:center!important;
    margin:0 auto!important;
    width:307px
}
.under {
    z-index:2!important;
    display:inline;
    position:absolute;
    width:307px;
    height:210px;
    background:transparent
}
.under:hover { z-index:4!important }

jQuery

<!-- Hover Opacity -->
<script type="text/javascript">
$(document).ready(function(){
    $("#portfolio_wrap .img img").hover(function(){
        $(this).fadeTo("slow", 0.0); // This should set the opacity to 100% on hover
    },function(){
        $(this).fadeTo("slow", 1.0); // This should set the opacity back to 60% on mouseout
});
});
</script>

Answer 1

Using !important often causes problems… Here it works fine by just removing this one line:

#portfolio_content .img img:hover { z-index:1!important }

http://jsfiddle.net/sushik/yJj2Q/