Text Hover Reveals Image Behind (z-index) - what's the issue? [duplicate] - html

Question

This question already has answers here:
Why does z-index not work?
(10 answers)
Closed 4 years ago.
The goal is to have the image show up BEHIND the text upon hover. I've tried several different scenarios, but the z-index doesn't take.
Here is the site: http://lawnyavawnya.com/2018/artists/
.artisthover {
display: none
}
h2.two:hover img {
display: block;
z-index: -5;
}
<h2 class="two">
<h2>ALBERT DALTON</h2>
<img src="http://lawnyavawnya.com/2018/wp-content/uploads/2018/04/Weary_Thumb.jpg" class="artisthover">
</h2>
What am I missing?

Answer 1

You cant nest h2 inside h2 because the like adding h3 inside h2 the second heading will be displayed smaller in some browsers.
z-index works with positioned elements only.
check this code see how it works:
.artisthover {
display: none;
}
h2.two:hover img {
position: relative;
display: block;
z-index: -1;
}
<h2 class="two">
ALBERT DALTON
<img src="http://via.placeholder.com/1000" class="artisthover">
</h2>

Answer 2

its not using Z-index but by using CSS background image this can be done easily
h2:hover {
height: 200px;
background-image: url('http://lawnyavawnya.com/2018/wp-content/uploads/2018/04/Weary_Thumb.jpg');
background-position: 0px 15px;
background-repeat: no-repeat;
background-size: auto;
}
<div>
<h2>ALBERT DALTON</h2>
</div>

Answer 3

In order to the z-index to work it needs a position different than static. Add position: relative; to the img and you'll get it to work.
h2.two:hover img {
display: block;
z-index: -5;
position: relative;
}
You could also add z-index to the h2 if you want the picture over the text:
h2.two {
position: relative;
z-index: 1;
}