CSS-Only Interactive Image

I wanted to create an interactive image using pure CSS - the idea was to have a different image depending on where the user clicked.

How it works

Using buttons and their active and focus states, we can set the image content to another path/url.

img {
  content: url("image.jpg")
}

button:active ~ img,
button:focus ~ img {
  content: url("new-image.jpg")
}