.figure {
  position: relative;
  width: 800px;
  /*Keep width set to its original resolution or else it won't be centered.*/
  max-width: 800px;
  top: 100;
  margin: 0 auto;
}
.figure img {
  /*this is the image that first appears.*/
  display: block;
  position: absolute;
  top: 100;
  /*"top," for all of those values, determines where on the page its aligned vertically.*/
  max-width: 800px;
  height: auto;
  margin: 0 auto;
}
.figure .image-hover {
  /*this is the image that'll appear when hovered over.*/
  position: absolute;
  top: 100;
  right: 0;
  left: 0;
  bottom: 0;
  object-fit: contain;
  opacity: 0;
  transition: opacity .38s;
}
.figure:hover .image-hover {
  opacity: 1;
}