Edit in JSFiddle

<div class="image-block">
  <div class="image-block__image">
    <img id="image" src="https://picsum.photos/id/237/600/500" alt="">
  </div>
  <div class="image-block__controls">
    <button
      class="image-block__ctrl image-block__ctrl--foo"
      data-img="https://picsum.photos/id/234/900/200">foo</button>
    <button
      class="image-block__ctrl image-block__ctrl--bar"
      data-img="https://picsum.photos/id/214/500/200">bar</button>
    <button
      class="image-block__ctrl image-block__ctrl--baz"
      data-img="https://picsum.photos/id/134/440/770">baz</button>
  </div>
</div>
.image-block {
  position: relative;
  display: inline-block;
}

.image-block__image {
  position: relative;
  z-index: 1;
}

.image-block__image > img {
  display: block;
}

.image-block__controls {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.image-block__ctrl--foo,
.image-block__ctrl--baz {
  align-self: flex-end;
}
const image = document.querySelector('img')

document.querySelectorAll('button').forEach(btn => {
	btn.addEventListener('click', e => image.src = e.target.dataset.img)
})