<main> 
    <input type=checkbox>
    <div class="skin one"></div>
    <div class="skin two"></div>
</main>
input{
  width: 100%;  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.skin{
  pointer-events: none;
  border-radius: inherit;
}

.one.skin{
 background: no-repeat center -40px url('photo-1584107662774-8d575e8f3550?w=350&q=100');
}

.two.skin{
  background: no-repeat center -110px url('photo-1531430550463-9658d67c492d?w=350&q=100');
  --mask: radial-gradient(circle at 45px 45px , rgba(0,0,0,0) 40px, rgba(0,0,0,1) 40px);
  mask-image: var(--mask); -webkit-mask-image: var(--mask);
}

input:checked ~ .two.skin{
  --mask: radial-gradient(circle at 305px 45px, rgba(0,0,0,1) 40px, rgba(0,0,0,0) 40px);
  mask-image: var(--mask); -webkit-mask-image: var(--mask);
}

main{
  display: grid;
  width: 350px; height: 90px;
  border-radius: 45px;
}

main > *{ grid-area: 1/1;}

body{
  display: grid;
  height: 100vh;
  align-items: center; 
  justify-items: center;
  background: blue;
  user-select: none; -webkit-user-select:  none;
  -webkit-tap-highlight-color: transparent;
}

/* This code is for heuristic purposes only. Use a referencing <label> where needed. Instead of images you can also use two different colors or other background designs. Pseudo-elements can be used instead of <div>s. Instead of rgba(0,0,0,0), you can use `transparent`, and instead of rgba(0,0,0,1), you can use any opaque color value. */

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.