body {
  margin: 0;
}
// Simple Flex Container
.container {
  display: grid;
  grid-template-columns: repeat(2, 50%);
  gap: 0;
  
  div {
    height: 50vh;
    background-image: url(https://www.placecage.com/g/200/300);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    
    // The magic
    cursor: pointer;
    transition: opacity 0.2s;
  }
}

// On container hover, fade div not actively hovered.
.container:hover div:not(:hover) {
  opacity: 0.5;
}