<div class="items">
  <div class="track">
    <div class="item">
      <img src="http://lorempixel.com/400/200/cats">
    </div>
    <div class="item">
      <img src="http://lorempixel.com/400/200/cats">
    </div>
    <div class="item">
      <img src="http://lorempixel.com/400/200/cats">
      <div class="button"></div>
    </div>
  </div>
</div>

img {
  display: block;
  width: 100%;
}

.items {
  max-width: 100%;
  overflow: auto;
  scroll-snap-align: start;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.track {
  width: 300%;
  display: flex;
}

.item {
  width: 100%;
  position: relative;
}

.button {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: no-repeat 50% 50%
    url("data:image/png;base64,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");
}