CODEWITHSUNDEEP
cssz-index
siouxfan45
siouxfan45

Reputation: 199

Div not coming to front: Z-Index

I am using the code below, but .under is not rising above (and covering up) #portfolio_content .img img as it should on hover.

#portfolio_wrap {
    overflow:hidden;
    width:980px;
    float:left
}
#portfolio_content {
    float:left;
    clear:both;
    margin:0 auto;
    overflow:hidden;
    width:650px!important
}
#portfolio_content ul {
    list-style:none
}
#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 .title, #portfolio_content .img .title a {
    font-size:22px;
    margin:100px 0 10px 0;
    float:left!important;
    width:307px;
    text-align:center;
    position:relative
}
.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
}
.under:hover { z-index:4!important }

Any thoughts? I am assuming this is related to z-index, but I don't know what I have done wrong.

Upvotes: 0

Views: 1196

Answers (2)

darma
darma

Reputation: 4747

You cannot hover over .under since it's always "under" your images, tw16 is right.

Instead of playing with z-indexes, try actually placing .under inside .img but on top of your images and with display:none, and then do something like :

.img:hover .under{
    display:block;
}

I might add your markup isn't quite optimized and .img should be directly placed on the a tags, not on useless inside spans, which are waaaay too many anyway :)

Edit : (as answer to comment)

In case there is no image to show, your markup will be different (as i suppose generated by a server side script, like php) as when there is one to display (for instance you won't echo the img tag). You can as well use that condition to write 2 differents classes, for instance .img and .no-img :

.no-img .under{
    display:block;
}

.img .under{
    display:none;
}

.img:hover .under{
    display:block;
}

Upvotes: 1

tw16
tw16

Reputation: 29605

Without seeing the page rendered, I would have to assume the problem is that you cannot actually hover over .under (z-index:2) as it is hidden under the #portfolio_content .img img (z-index:3) initially and therefore you would just be hovering the img instead.

Upvotes: 3

Related Questions