JSFiddle - React, Tailwind, and code Playground

by abarykin

HTML

<div class="cont">
  <img src="https://xcraftsumulator.ru/uploads/images/i1.png" class="img1 show" alt="">
  <img src="https://xcraftsumulator.ru/uploads/images/i2.png" class="img2" alt="">
  <img src="https://xcraftsumulator.ru/uploads/images/i3.png" class="img3" alt="">
  <img src="https://xcraftsumulator.ru/uploads/images/i4.png" class="img4" alt="">
</div>

<button data-target="img1">картинка 1</button>
<button data-target="img2">картинка 2</button>
<button data-target="img3">картинка 3</button>
<button data-target="img4">картинка 4</button>

CSS

.cont {
  width: 180px;
  height: 180px;
  margin: 10px;
  position: relative;
}

.cont img {
  position: absolute;
  left: 0;
  top: 0;
  transition-property: opacity;
  transition-duration: 3s;
}

.cont img {
  opacity: 0;
}

.cont img.show {
  opacity: 1;
}

JavaScript

$('button').click(function() {
  $('.cont img').removeClass('show');
  $class = $(this).data('target');
  
  $('.cont img.'+$class).addClass('show');
});