Display image on hover to text

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;
}

Hi,

If you use Squarespace 7.1, you can achieve this with Portfolio Page 

https://support.squarespace.com/hc/en-us/articles/360035611791-Portfolio-pages#toc-portfolio-page-layouts

If you use SS 7.0, let me know. We will try finding another solution