When I hover over an image and use the z-index property, the image flickers?

Wednesday, July 2, 2014

I'm not super super great with html but I've been able to make my way into some coding and so far, this is the only issue I can't understand nor fix.


I have one big image but under the image are text boxes, links, and other images. I can get the image to where if I hover my mouse over it, I can see the stuff under it perfectly, but I can't scroll textboxes nor can I click my links.


I tried setting the z-index to -9 but which works...if I keep my mouse still. (Pointless.) If i move my mouse, the image flickers with ever movement. Any fixes? Here is the issue. I apologize for the messy code.



#aesth {
position:fixed;
top:150px;
left:90px;
width:432px;
height:600px;
background: url('http://ift.tt/1qpftqN'), #fff;
z-index:9;
}

#aesth:hover {

z-index:1;
opacity: 0;
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}






http://ift.tt/1oqyyaB