<div></div>
div {
  position: relative;

  width: 536px;
  height: 354px;
}

div::before,
div::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  transition: 0.5s;
}

div::before {
  background: url("https://picsum.photos/id/219/536/354") center / cover
    no-repeat;
}

div::after {
  background: url("https://picsum.photos/id/851/536/354") center / cover
    no-repeat;
  opacity: 0;
}

div:hover:before {
  opacity: 0;
}

div:hover:after {
  opacity: 1;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.