JSFiddle - React, Tailwind, and code Playground

by Noumenon72

HTML

<dl id="simple-gallery">
  <dt tabindex="1"><img alt="" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/london-thumb.jpg">
</dt>
  <dd><img alt="" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/london.jpg">Westminster Bridge at dusk, London
  </dd><dt tabindex="2"><img alt="" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/paris-thumb.jpg">
</dt>
  <dd><img alt="" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/paris.jpg">The Eiffel tower, Paris
  </dd><dt tabindex="3"><img alt="" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/san-francisco-thumb.jpg">
</dt>
  <dd><img alt="" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/san-francisco.jpg">Golden Gate bridge at sunset,

CSS

<style> dl#simple-gallery {
  position: relative;
  background: #222;
  font-size: 0;
  padding: 3rem;
  padding-bottom: 8rem;
}

dl#simple-gallery dt {
  width: 15%;
  min-width: 50px;
  cursor: pointer;
}

dl#simple-gallery dt img {
  width: 100%;
  height: auto;
}


/*dl#simple-gallery dt:hover + dd, dl#simple-gallery dt:focus + dd  { opacity: 1;  }*/

dl#simple-gallery dd {
  position: absolute;
  top: 3rem;
  left: 22%;
  opacity: 0;
  transition: .7s opacity;
  text-align: center;
  font-size: 1.4rem;
  font-style: italic;
  color: #fff;
  padding-left: 0;
  width: 63%;
}

dl#simple-gallery dd img {
  width: 100%;
  height: auto;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  display: block;
  margin-bottom: 1rem;
}

</style>

JavaScript

$("dt").on("mouseover", function(){
 	// Hide other images only when we want to show a new one.
  $("dd").css("opacity", 0);
	$(this).next().css("opacity", 1);
});