.image-container {
  position: relative;
  display: inline-block; /* Keeps container tightly bound to image size */
}

.image-container img {
  display: block;
  width: 100%;       /* Ensures both images align to identical sizing */
  height: auto;
}
.base-img {
  position: static;
}

.hover-img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transform: translate(0, 20px);
}

/* Fades the top image into view when hovering anywhere on the container */
.image-container:hover .hover-img {
  opacity: 1;
}

.image-container:hover .base-img {
  opacity: 0;
}