JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Example</title>
</head>
<body>

<img src="https://placekitten.com/200/300" alt="example" data-image="image-1" />
<img src="https://placekitten.com/300/300" alt="example" data-image="image-2"  />
<img src="https://placekitten.com/400/300" alt="example" data-image="image-3"  />

<hr />

<button data-toggle="image-1">Картинка 1</button>
<button data-toggle="image-2">Картинка 2</button>
<button data-toggle="image-3">Картинка 3</button>

</body>
</html>

SCSS

// Анимации на картинках
[data-image] {
  opacity: 1;
  will-change: opacity, transform;
  transition: opacity .5s ease, transform .5s cubic-bezier(0.740, -0.185, 0.355, 1.445);
  transform: scale(1);
  
  // Если класс .hidden, то скрываем с уменьшением
  &.hidden {
    opacity: 0;
    transform: scale(.7);
  }
}

// Анимации на кнопочке
button {
  cursor: pointer;
  transition: transform .1s ease;
  will-change: transform;
  
  &:hover {
    transform: scale(1.05);
  }
  
  &:active {
    transform: scale(.9);
  }
}

JavaScript

[].forEach.call(document.querySelectorAll('[data-toggle]'), element => { 
    element.addEventListener('click', event => {
        let name = event.target.getAttribute('data-toggle');
        
        let image = document.querySelector(`[data-image=${name}]`); // Получаем картинку с нужным идентификатором
        
        image.classList.toggle('hidden'); // Добавляем/убирваем класс hidden
    }, false);
});