Q:

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

When you hover over the paragraph text in JS Fiddle the image gets covered with the background. Using z-index everywhere I could think of doesn't have any effect. (I left the useless z-index stuff in there so show you what I tried.) I also tried pointer-events: none; in various places.
I also tried this type of thing elm1:hover elm2{}, but that didn't help. I'm new to CSS and I'm applying what I have searched and found.
Edit: The 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 to 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 a {
    position: relative;
    text-decoration: none;
    color: #000;
}
.three-cols a 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 is my demo:
http://jsfiddle.net/pxD33/
PS - needs to be responsive and solution all in CSS and HTML.

A:

<a> is by default an inline-level element. Once you set display: block to it, it fixes the issue.
.three-cols a {
    display: block;
    position: relative;
    text-decoration: none;
    color: #000;
}

http://jsfiddle.net/teddyrised/pxD33/2/
p/s: You don't need z-index for your case. You can safely remove all of them.

