body {

  display: flex;

  align-items: center;

  justify-content: center;

  height: 90vh;

}

​

figure:before,

figure:after {

  content: '';

  height: 100%;

  width: 100%;

  top:0;

  left:0;

  position: absolute;

}

​

figure {

  margin: 0;

  width: 500px;

  height: 300px;

  position: relative;

  cursor: crosshair;

}

​

img {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

​

img {

  filter: brightness(1.1) contrast(1.3);

}

​

figure:hover:before {

  z-index: 2;

  mix-blend-mode: multiply;

  box-shadow: 0 0 100px rgba(100, 150, 200, 1) inset, 0 0 300px rgba(100, 150, 200, 1) inset;

}

​

figure:hover:after {

  z-index: 3;

  mix-blend-mode: difference;

  background: rgba(0, 0, 255, 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;

}