:root {
    --duration: 3s;
}

body {
    padding: 0;
    margin: 0;
    overflow: hidden;
}

img {
    width: 100%;
    height: 100%;
}

div {
    position: absolute;
    width: 100%;
    height: 100%;
}

@keyframes eye-focus {
    0% {
      filter: blur(0);
    }
    100% {
      filter: blur(10px);
    }
}

@keyframes focus-shift {
    0% {
      transform: scale(1)
    }
    100% {
      transform: scale(1.01)
    }
}

.landscape {
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/54046/rainy_landscape.jpeg);
    background-size: cover;
    background-position: center;
    filter: blur(1em);
    animation: eye-focus var(--duration) ease-in infinite alternate, 
      focus-shift var(--duration) ease-in infinite alternate;
}

.glass {
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/54046/glass_droplets.jpeg);
    filter: blur(0);
    animation: eye-focus var(--duration) ease-in infinite var(--duration) alternate, 
      focus-shift var(--duration) ease-in infinite alternate;
    opacity: 0.5;
}