CSS image masking effect

Create a simple CSS masking effect to reveal layers (currently this only works in limited browsers).

<div class="image" style="background-image: url('http://kevin-beck.co.uk/assets/edit-2/edit-2__2.jpg');"></div>
<div class="image image--has-mask" style="background-image: url('http://kevin-beck.co.uk/assets/edit-2/edit-2__21.jpg');"></div>

.image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.image--has-mask {
  -webkit-mask-image: radial-gradient(100px at 45% 50%, transparent 100%, black 100%);
    -o-mask-image: radial-gradient(100px at 45% 50%, transparent 100%, black 100%);
    -moz-mask-image: radial-gradient(100px at 45% 50%, transparent 100%, black 100%);
    mask-image: radial-gradient(100px at 45% 50%, transparent 100%, black 100%);
}

Examples

• Codepen Example
• Live Example