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: saturate(0.6);

}

​

figure {

  filter: contrast(1.1) saturate(1.9) sepia(0.7) grayscale(0.3);

}

​

figure:hover:before {

  z-index: 2;

  mix-blend-mode: color;

  box-shadow: 0 0 250px brown inset;

  background: rgba(125, 100, 0, 0.3);

}

​

figure:hover:after {

  z-index: 3;

  mix-blend-mode: hard-light;

  box-shadow: 0 0 150px pink inset;

  background: rgba(198, 155, 0, 0.3);

}

​

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;

}