<div class="main">
   <div class="bg"></div>
   <div class="text">
      Awesome
   </div>
</div>

* {
   margin: 0;
   padding: 0;
   font-family: 'Righteous', cursive;
}

.main {
   height: 100vh;
   width: 100%;
   overflow: hidden;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

.text {
   height: 100vh;
   width: 100%;
   background-image: url("https://images4.alphacoders.com/284/284838.jpg");
   background-size: 100% 100%;
   background-position: center;
   font-size: 150px;
   text-transform: uppercase;
   text-align: center;
   line-height: 200px;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   padding-top: 250px;
   -webkit-background-clip: text;
   color: transparent;
   transition: all 2.5s ease-in-out;
}

.main:hover .text {
   background-size: 80% 80%;
}

.bg {
   height: 100vh;
   width: 100%;
   background-image: url("https://images4.alphacoders.com/284/284838.jpg");
   background-size: 100% 100%;
   background-position: center;
   transform: rotateY(180deg);
   transition: all 2.5s ease-in-out;
}

.main:hover .bg {
   background-size: 150% 150%;
}