<main class="main-container">
  <!--  Inspired by a tutorial by Mary Lou https://tympanus.net/codrops/2020/03/11/background-scale-hover-effect-with-css-clip-path/ 
-->
  <div class="text text--left">Mirror, mirror on the wall...</div>
  <div class="items-container">
    <div class="item item--forest">
      <div class="item__screen item__screen--full"></div>
      <div class="item__screen item__screen--clip"></div>
    </div>

    <div class="item item--girl">
      <div class="item__screen item__screen--full"></div>
      <div class="item__screen item__screen--clip"></div>
    </div>
  </div>
  
   <img class="mirror" src="https://images2.imgbox.com/f5/2e/gzBTKoLY_o.png" alt="mirror"/>
  
  <div class="text text--right">who's the fairest of them all?</div>
</main>
// Google font
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');

// Variables
$clip-path: polygon(50% 0%, 20% 100%, 80% 100%);

$background-img-girl:url('https://images.unsplash.com/photo-1464863979621-258859e62245?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=666&q=80');

$background-img-forest: url('https://images.unsplash.com/photo-1487111023822-2e903e12f6f0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=668&q=80');

// Styles
body *{
  box-sizing: border-box;
}
.main-container{
  display: flex;
  height: 100vh;
  justify-content: space-between;
  align-items: center;
  background: radial-gradient(circle, rgba(78,78,78,1) 0%, rgba(0,0,0,1) 100%);
}

.items-container{
  overflow: hidden;
  border-radius: 50%;
  position:relative;
  height: calc(100vh/1.2);
  width: calc(100vh/1.8);
  background-color: #202938;
  
  &:hover{
    .item--girl{
      opacity: 1;
      
      .item__screen--full{
        transform: scale(1);
      }
    }
    
    .item--forest{
      opacity: 0;
      
       .item__screen--full{
        transform: scale(1.07);
      }
    }
  }
}

.item,
.item__screen{
  top: 0;
	position: absolute;
	width: 100%;
	height: 100%;
}

.item {
  opacity: 0;
  z-index: 1;
  transition: opacity 0.4s;
  
  &:first-child{
    opacity: 1;
    z-index: 100;
  }
  
  &__screen{
 background-repeat:no-repeat;
      background-size: cover;
      background-position: 50% 50%;
    &--full{
      opacity: 0.6;
      transition: transform 1.8s;
    }
    
    &--clip{
      clip-path: $clip-path;
    }
  }
  
  &--girl{
    .item__screen{
      background-image: $background-img-girl;
      
      &--full{
        transform: scale(1.07);
      }
    }
  }
  
  &--forest{
    .item__screen{
      background-image: $background-img-forest;
    }
  }
}

.mirror{
  position: absolute;
  pointer-events: none;
  z-index: 101;
  width: calc(100vh/1.5);
  height: 100vh;
  left: 50%;
  transform: translateX(-50%);
  filter: brightness(80%);
  
}

.text{
  font-family: 'Playfair Display', serif;
  color: white;
  font-size: 42px;
  opacity: 0;
  width: 25%;
  
  &--left{
     animation: bluryText 2s linear 1s forwards;
    align-self: flex-start;
    margin-top: 24px;
    margin-left: 24px;
  }
  
  &--right{
    animation: bluryText 2s linear 2.5s forwards;
    align-self: flex-end;
    margin-bottom: 24px;
    margin-right: 24px;
    text-align: right;
  }
}

//Animations
@-webkit-keyframes bluryText {
  0%   {
    -webkit-filter: blur(10px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
    opacity: 1;
  }
}
View Compiled 
// No JS in my version. For a version using JS Gasp, please visit the original tutorial I followed at: https://tympanus.net/Development/BackgroundScaleHoverEffect/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.