Изображение при наведении курсора показывает текст, несмотря на z-Index

Question

У меня настроен код, поэтому при наведении курсора на H2 изображение открывается. Гипотетически, поскольку текст z-index: 2, а изображение z-index: 1, текст H2 должен оставаться фиксированным. Однако при наведении курсора текст все еще перемещается вниз, чтобы освободить место для изображения.

Мне нужно, чтобы текст оставался фиксированным в той же позиции, а фоновое изображение появлялось при наведении, не подталкивая h2.

Вы можете просмотреть тест здесь: http://www.rorywolfseydel.com/test3-2

h2 {
  line-height: 68px !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 80px;
  font-weight: 0 !important;
  color: #ffffff;
  z-index: 12;
}

.artisthover {
  display: none
}

h2.two:hover img {
  display: block;
  z-index: -1;
  position: relative;
  margin-top: -200px;
  margin-left: -250px
}

h2.two a {
  color: #ffffff;
}

h2.three:hover img {
  display: block;
  z-index: -1;
  position: relative;
  margin-top: -200px;
  margin-right: -250px
}

h2.three a {
  color: #ffffff;
}

<center>
  <h2 class="two">
    <a href="http://lawnyavawnya.com/2018/artists/absolutelyfree">ABSOLUTELY FREE</a>
    <img src="http://lawnyavawnya.com/2018/2019artists/absolutelyfree.jpg" class="artisthover" width="500px">
  </h2>
</center>

<center>
  <h2 class="three">
    <a href="http://lawnyavawnya.com/2018/artists/badgeepoqueensemble">BADGE EPOQUE ensemble</a>
    <img src="http://lawnyavawnya.com/2018/2019artists/badgeepoque.jpg" class="artisthover" width="500px">
  </h2>
</center>