<div class="container">
  <input id="black" name="palette" type="radio" checked>
  <label class="color black" for="black"></label>
  <input id="haki" name="palette" type="radio">
  <label class="color haki" for="haki"></label>
  <input id="orange" name="palette" type="radio">
  <label class="color orange" for="orange"></label>
  <img id="black-image" class="image" src="https://images.unsplash.com/photo-1507861675166-eed3aff92302?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=9261812cb15177c6ae4ef9c93f9b234b" alt="">
  <img id="haki-image" class="image" src="https://images.unsplash.com/photo-1519756639815-2075794e800e?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=71609b2585b3a0511c3326f2cfed22ff" alt="">
  <img id="orange-image" class="image" src="https://images.unsplash.com/photo-1507646227500-4d389b0012be?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=7656360dc78c2c1e47b977eeda8e2850" alt="">
</div>
body
  display: flex
  width: 100%
  height: 100vh
  justify-content: center
  align-items: center
  background-color: #222

.container
  width: 60%

input[type="radio"]
  display: none
  &:checked + .color
    border: 3px solid #fff

.color
  display: block
  box-sizing: border-box
  width: 30px
  height: 30px
  border-radius: 50%
  border: 1px solid #fff
  margin: 30px 0

.black
  background-color: black

.haki
  background-color: green

.orange
  background-color: orangered

#black:checked ~ #black-image
  z-index: 10

#haki:checked ~ #haki-image
  z-index: 10

#orange:checked ~ #orange-image
  z-index: 10

.image
  position: absolute
  width: 400px
  height: 400px
  top: 10%
  left: 50%
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.