JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
 <h1>
 text text text text text text text text text text text text text text text text text text text text


 
  <a href="#" class="relative onhover-toggle-child-class" data-target=".target2" data-toggle="shown">Show Image
    <span class="absolute animated target2 animated on-top hidden">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR24qtJ7yiZutbUs9MtLQUmWN9jF6j2fLQTov8_qRCgRMWRPRjm" alt="image" />
    </span>
  </a>



  <a href="#" class="relative onhover-toggle-child-class" data-target=".target2" data-toggle="shown">Show Image
    <span class="absolute animated target2 on-top animated hidden">
      <img src="https://f4.bcbits.com/img/0013854064_10.jpg" alt="image" />
    </span>
  </a>
  
    <a href="#" class="relative onhover-toggle-child-class" data-target=".target2" data-toggle="shown">Show Image
    <span class="absolute animated target2 on-top animated hidden">
      <img src="https://f4.bcbits.com/img/0013854064_10.jpg" alt="image" />
    </span>
  </a>
  
    <a href="#" class="relative onhover-toggle-child-class" data-target=".target2" data-toggle="shown">Show Image
    <span class="absolute animated target2 on-top animated hidden">
      <img src="https://f4.bcbits.com/img/0013854064_10.jpg" alt="image" />
    </span>
  </a>
text text text text text text text text text text text text text text text text text text text text
</h1>

CSS

h1 {
  display: block;
  font-family: helvetica, san-serif;
  z-index: 99;
}

a {
  text-decoration: none;
  color: #000;
}

a:hover {
  color: red;
}

a span {
  display: block;
}


.on-top {
  z-index: 99;
}

.relative {
  position: relative;
}
.absolute {
  position: absolute;
  top: 0;
  z-index: -1;
}

.animated {
  transition: opacity 1s ease;
}

.hidden.shown,
.shown {
  opacity: 1;
  height: auto;
  overflow: visible;
}

.hidden {
  opacity: 0;
  height: 0;
  overflow: hidden;
}

JavaScript

$('.onhover-toggle-child-class').on(
	'mouseenter mouseleave',
  function() {
    var element = $(this);
    var selector = element.data('target');
    var child = element.find(selector);
    var classes = element.data('toggle');


    child.toggleClass(classes);
  }
);