CSS hover, z-index, and divs - html

Question

I am working on a project for college and I am having trouble making a div change opacity from 0 to .9 when the user hovers over the div. I was wondering does the z-index affects how the hover works. I have tried the code in J Query and by using the CSS transition property and still receive the same results. NOTHING HAPPENS. Here is the code I used in CSS and HTML.
<div class="special">
<div class="spImage">
<div>
<article>Lil Wayne</article>
</div>
<img id="special1" src="image/2pc.jpg" />
<p>2pc<br>Dark<br>$1.30</p>
</div>
</div>
.spImage{
border: 2px solid grey;
background-color: black;
position: relative;
z-index: -1;
}
.spImage div{
background-color: orange;
position: absolute;
opacity: 0;
width: 250px;
height: 330px;
z-index: 0;
box-shadow: 0px 0px 5px 10px orange;
border-radius: 5px;
-o-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.spImage div:hover{
opacity: .8;
}
My overall goal is to make the div appear over the div with a class of spImage. Any help is greatly appreciated, Thanks.

Answer 1

z-index determines an elements stacking order, in your example, you don't necessarily need to be using z-index at all since your HTML elements are already correctly positioned for what you are trying to do.
See the below example without the z-index property - if I understand your question correctly, this should be the expected behaviour:
.spImage{
border: 2px solid grey;
background-color: black;
position: relative;
}
.spImage div{
background-color: orange;
position: absolute;
opacity: 0;
width: 250px;
height: 330px;
box-shadow: 0px 0px 5px 10px orange;
border-radius: 5px;
-o-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.spImage div:hover{
opacity: .8;
}
<div class="special">
<div class="spImage">
<div>
<article>Lil Wayne</article>
</div>
<img id="special1" src="https://i.imgur.com/Ik7I6l7b.jpg" />
<p>2pc<br>Dark<br>$1.30</p>
</div>
</div>