SUNBEAMV

Hi Squarespace peeps!

I wonder how do get this effect to have image display when on hover to text, and at the same time have the rest of the text turn other color? 

Currently I'm having code below that display the image only, thanks in advance! 

.zeit:hover:before {
  content: '';
background: url('https://static1.squarespace.com/static/5f5d6362095e157f76523586/t/615aafbb1ab568669d929975/1633333181522/Frame+195.png');
  background-size:contain;
  background-repeat:no-repeat;
width: 910vw; 
left: -5vw; 
height: 30vh; 
margin-top: -50px;
position: absolute;
opacity:1;
transition: transform .4s cubic-bezier(.86,0,.07,1),opacity .4s cubic-bezier(.86,0,.07,1);
   transform: translate3d(.33333vh,-11.66667vh,0);
  -webkit-animation: flip-in-hor-bottom 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000) both;
            animation: flip-in-hor-bottom 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000) both;

      
}
.zeit:hover {
   font-size:70px;
  font-family: 'montserrat';
   font-style: normal;
  font-weight: bold;
   color:#DB5703;
}
.zeit {
  text-align:center;
  font-family: 'montserrat';
  font-weight: bold;
   font-size: 60px;
   margin-bottom: 20px;
  color: #444444;
}