<main>
  <img class="img img-01" src="https://i.imgur.com/2SE5Ysz.png" alt="">
  <img class="img img-02" src="https://i.imgur.com/re3Rw11.jpg" alt="">
  
  <div class="credit">
  <p>Photo by <a target="_blank" href="https://unsplash.com/@aiony">Aiony Haust</a></p>
</div>
</main>
main {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  background-color: black;
  display: flex;
  align-items: center;
  justify-content: center;
}

a {
  color: inherit;
  text-decoration: none;
  &:hover {
    opacity: .6;
  }
}

.credit {
  position: absolute;
  top: 2%;
  left: 2%;
  color: rgba(white,.4);
  p {
    margin: 0;
    font-size: .8em;
    text-transform: uppercase;
    letter-spacing: .08em;
  }
}

.img {
  width: 80%;
  height: auto;
  position: absolute;
  // cursor: none;
  transition: 650ms ease;
  &-01 {
    z-index: 2;
  }
  &-02 {
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    filter: blur(100px);
  }
}

.img-01:hover {
  opacity: 0;
}

.img-01:hover ~ .img-02 {
    opacity: 1;
    filter: blur(0);
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.