image to scrollbox on hover cr. enbyself

<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link href="https://fonts.googleapis.com/css2?family=Gamja+Flower&amp;display=swap" rel="stylesheet">
<style>

mark {
background: linear-gradient(0deg, rgba(177,194,198,1) 0%, rgba(209,224,228,1) 100%);
border: 1px solid #768488;
border-radius: 5px;
font-family: handy;
color: #fff;
padding-left: 10px;
padding-right:10px;
letter-spacing: 1.5px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 11px;
margin: 0px 1px;
cursor: hidden;
}

.hae {
border-width: 7px;
border: 2px double #85989E;
border-radius: 5px;
height: 120px;
width: 120px;
padding: 2px;
font-size: 0.85em;
font-family: 'Cabin', sans-serif;
color: #FF95AA;
position: relative;
bottom: 0px;
left: -0px;
overflow: auto;
overflow: hidden;
}

.hae:hover .sip {
height: 0%;
}

.hea {
text-align: left;
color: #1E1111;
font-size: 20px;
width: 100%;
height: 100%;
background: #ffffff00;
}

.sip {
color: #ffffff00;
font-size: 20px;
width: 100%;
height: 100%;
line-height: 300px;
position: absolute;
top: 0;
left: 0;
transition: 0.8s;
-moz-transition: 0.8s;
-webkit-transition: 0.8s;
-o-transition: 0.8s;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}

#choco {
height: 100%;
width: 100%;
background: #ffffff00;
position: relative;
top: 0;
padding: 10px;
white-space: nowrap;
margin-left: 10px;
}

.tem {
height: 100%;
object-fit: cover;
white-space: normal;
float: left;
-webkit-mask-size: 100%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}

</style>
<title></title>
</head>
<body>
<div class="hae">
<div class="hea">
<br>
<div class="tem">
<center>
<div id="inside">
<center>
<style>
#fart {
border-width: 10px;

border-radius: 5px;
height: 121px;
width: 121px;
padding: 2px;
font-size: 0.6em;
font-family: 'Cabin', sans-serif;
color: #553f45;
position: relative;
top: -26px;
left: -3px;
z-index: 1;
overflow: auto;
background: rgb(255,255,255);
background: radial-gradient(circle, #c4d2d6 9%, #FFFFFF 100%);
</style>
<center>
<div id="fart"><br>
<mark>About</mark><br>kamsi she/fai 15 black nigerian
<br>
<br><span style="color:#768488;"><strong>❥</strong></span> bangchan, kdramas, crds, 2000's fashion and aesthetic, swimming, online games, true crime.
<br>
<br><mark>music</mark><br> stray kids billlie treasure nmixx aespa ive lesserafim bp wjsn fromis bibi & more.
<strong>solo</strong> joy, hikaru, bahiyyih
<br>
<br><mark>media</mark><br> 2521, business proposal, outer banks, extracurricular, my liberation notes, crazy love, wrong side of the tracks, my sassy girl.
<br>
<br><mark>links</mark><br><a href="https://retrospring.net/fukutomi" target="_blank">main</a> <a href="https://try.carrd.co/xiaoting" target="_blank">priv</a> <a href="https://docs.google.com/document/d/1BYn65dlja92-G79pTFcbzeuarmj-fB6lEx06U1OHMvM/edit?usp=sharing" target="_blank">spotify</a> <a href="https://docs.google.com/document/d/1BYn65dlja92-G79pTFcbzeuarmj-fB6lEx06U1OHMvM/edit?usp=sharing" target="_blank">whi</a>
<br>
<br>

</div>
</center>
</div>
</center>
</div>
<div id="overlay"><img class="sip" src="https://imgur.com/Z8VSmkV.png"></div>
</div>
</div>