body {

  display: flex;

  align-items: center;

  justify-content: center;

  height: 90vh;

}

​

figure:before,

figure:after {

  content: "";

  display: block;

  height: 100%;

  width: 100%;

  top: 0;

  left: 0;

  position: absolute;

}

​

figure {

  margin: 0;

  width: 500px;

  height: 300px;

  padding: 0;

  display: inline-block;

  position: relative;

  cursor: crosshair;

}

​

img {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

​

img {

  filter: grayscale(1);

}

​

figure {

  filter: contrast(1.8) brightness(1.1) saturate(1.5);

}

​

figure:hover:before {

  z-index: 2;

  mix-blend-mode: screen;

  opacity: 0.4;

  background: conic-gradient(from 90deg, red, orange, yellow, green, blue, red);

}

​

figcaption {

  color: white;

  padding: 5px 10px;

  background: rgba(0, 0, 0, 0.8);

  border-radius: 5px;

  position: absolute;

  top: 20px;

  left: 10px;

  font-size: 1.2em;

  font-family: "Lato";

  z-index: 999;

}

​