CODEWITHSUNDEEP
csshoverz-indextumblr
user2945861
user2945861

Reputation: 25

Change z-index on hover

I am trying to change the z-index of the image posts that when you hover over them, it comes in front and cover the big white text. Not sure what I'm doing wrong here...

http://hkumbrella.tumblr.com/

Image post css:

#post img {
width:100%;
z-index: -100;
}
#post img:hover {
opacity:1;
z-index: 100000 !important;

White text css(2014):

.subtitle2{
top:45%;
left:2%;
font-family:arimo;
font-weight:bold;
color: white;
text-transform:uppercase;
font-size:75px;
letter-spacing:-3px;
text-align:center;
position: fixed;
z-index:100;
color: #FFFFFF !important;
{block:Permalink}display:none;{/block:Permalink}
}

Upvotes: 1

Views: 3494

Answers (1)

jad-panda
jad-panda

Reputation: 2547

Set #wrapper's z-index higher then 100.

All the images are inside #wrapper div, and its z-index is less then its sibling .subtiles, so even if you set higher z-index for children of #wrapper, it won't come in front.

and you are using #post multiple at places in your page. you are not suppose to use id multiple places, instead use classes, they are meant for that only.

Upvotes: 1

Related Questions