-1

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?

j08691
  • 204,283
  • 31
  • 260
  • 272
Anjela Freyja
  • 25
  • 6
  • 1
    your class selector is not correct! that's whats wrong. and for the z-index to work you need to add position to the container – Adam Apr 30 '18 at 02:40

3 Answers3

0

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>
crffty
  • 424
  • 1
  • 5
  • 16
0

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>
Adam
  • 1,385
  • 1
  • 10
  • 23
-1

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;
}
Fecosos
  • 944
  • 7
  • 17