Flexbox transitions are magical. By wrapping two images in a flex container aligned side by side, we can dictate their flex-grow parameters based purely on hovering!

Shrinking the Sibling

.tug-container {
  display: flex;
  width: 100%;
  height: 400px;
}

.tug-side {
  flex: 1; /* Both start at 50% / 50% */
  background-size: cover;
  background-position: center;
  transition: flex 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  cursor: pointer;
}

/* The one currently hovered balloons to massive size */
.tug-side:hover {
  flex: 4; /* Dominates the wrapper! */
}

We can even drop an absolute positioned title in the middle of each. Interact with the two competing landscapes in the Live Demo to see the seamless flex-ratio shifting.