html - On hover background color covers image, z-index not having any effect -

when hover on paragraph text in js fiddle image gets covered background. using z-index everywhere think of doesn't have effect. (i left useless z-index stuff in there show tried.) tried pointer-events: none; in various places.

i tried type of thing elm1:hover elm2{}, didn't help. i'm new css , i'm applying have searched , found.

edit: problem: on hover background color covers image

markup:

<div id="col2-middle" class="three-cols-middle three-cols">      <a href="about.php#how-we-work- projects">         <h1 class="h-big-font">specific projects</h1>         <img class="col-img" src="3dplotcroppedwithfinancial.png" alt="3dplot">             <p class="p-on-white">                             xxxxxxxx xxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxx                                       xxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx hover here cover img xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx                 <br/>                 <br/>     xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx             </p>     </a> </div> 

css:

div.three-cols {     float: left;     width: 29.33%;     position: relative;     left: 70.67%;     overflow: auto;     padding: 1% 1% 1% 1%;     min-width: 200px;     z-index:-1; } .three-cols {     position: relative;     text-decoration: none;     color: #000; } .three-cols p:hover {     background-color: #ecebeb; } .col-img {     float: left;     padding: 4%;     z-index: 1; } .three-cols h1 {     margin-bottom: 2%;     text-align: center; } .three-cols p {     padding: 0.5% 0 3% 0;     z-index: -1; } p {     word-wrap: break-word;     color: #000;     margin: 0;     padding: 10px 20px;     font-size: 16px; } 

here demo: http://jsfiddle.net/pxd33/

ps - needs responsive , solution in css , html.

<a> default inline-level element. once set display: block it, fixes issue.

.three-cols {     display: block;     position: relative;     text-decoration: none;     color: #000; } 

http://jsfiddle.net/teddyrised/pxd33/2/

p/s: don't need z-index case. can safely remove of them.