JSFiddle - React, Tailwind, and code Playground

by ninty9notout

HTML

<div class="container">
  <!-- Thumbnails -->
  <div class="thumb img1">
      <img src="//dummyimage.com/64x64/000/fff&text=One" />
  </div>

  <div class="thumb img2">
      <img src="//dummyimage.com/64x64/000/fff&text=Two" />
  </div>

  <!-- Main images -->
  <div class="primary img1">
      <img src="//dummyimage.com/256x128/000/fff&text=One" />
  </div>

  <div class="primary img2">
      <img src="//dummyimage.com/256x128/000/fff&text=Two" />
  </div>
</div>

CSS

.thumb {
    display: inline-block;
}

.primary {
    display: none;
}

.img1:hover ~ .img1,
.img2:hover ~ .img2 {
    display: inherit;
}