card on hover

<!----- made by @elroseria_ on twt/x do not remove creds ----->

<style>

@font-face {
font-family: B;
src: url(https://dl.dropbox.com/s/o5umfqvcshf0ugj/SantJoanDespiRegular.woff);
}

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}

body {
display: flex;
justify-content: center; /* center horizontally */
align-items: center; /* center vertically */
height: 100vh;
}

html {
overflow-y: scroll;
overflow-x: hidden;
}

::-webkit-scrollbar {
width: 0; /* remove scrollbar space */
background: transparent; /* to make scrollbar invisible */
}

::-webkit-scrollbar-thumb {
background: transparent;
}

.containerr0 {
position: relative;
width: fit-content;
font-family: 'poppins', sans-serif;
}

.imager0 {
display: block;
width: 20em;
height: 24em;
border-radius: 8px;
object-fit: cover;
}

.overlayr0 {
position: absolute;
top: 5px;
left: 5px;
bottom: 5px;
overflow: hidden;
width: 0; /* start closed */
height: 23.5em;
border: none;
border-radius: 8px;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
border: 1px solid rgba(255, 255, 255, 0);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0),
inset 0 1px 0 rgba(255, 255, 255, 0),
inset 0 -1px 0 rgba(255, 255, 255, 0),
inset 0 0 8px 4px rgba(255, 255, 255, 0);
transition:
width 0.5s ease,
border-color 0.3s ease 0.3s,
box-shadow 0.3s ease 0.3s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
}

.containerr0:hover .overlayr0,
.link-list:hover ~ .overlayr0 {
transition: all 1s ease-in-out;
width: 50%; /* slide in fully */
background: rgba(255, 255, 255, 0.3);
border: 1px solid rgba(255, 255, 255, 0.5);
}

.overlayr0.active {
width: 50%;
background: rgba(255, 255, 255, 0.3);
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.5),
inset 0 -1px 0 rgba(255, 255, 255, 0.1),
inset 0 0 8px 4px rgba(255, 255, 255, 0.4);
}

.textr0 {
color: black;
font-family: 'Poppins', sans-serif;
font-size: .7rem;
text-align: left;
width: 100%;
height: 100%;
padding: 5px;
line-height: 1.2em;
letter-spacing: -0.05em;
overflow-y: scroll;
}

.textr0 mark {
font-family: B;
padding: 2px 8px;
border: 1px solid black;
border-radius: 10px;
font-size: 15px;
background: none;
margin-bottom: 10px;
}

/* Link list styles */
.link-list {
position: absolute;
bottom: 0.5em;
right: 0.5em;
list-style: none;
padding: 0;
margin: 0;
}

.link-list li {
font-family: 'Poppins', sans-serif;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
padding: 1px 10px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 2px;
text-align: center;
}

.link-list a {
text-decoration: none;
color: black;
display: block;
}

@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}

@-webkit-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
const img = document.querySelector(".imager0");
const overlay = document.querySelector(".overlayr0");

img.addEventListener("click", function () {
overlay.classList.toggle("active");
});
});
</script>

<center>
<div class="containerr0">
<img src="https://pbs.twimg.com/media/Gx6l7HjaUAAoa5M?format=jpg&name=large"
alt="Avatar"
class="imager0"
/>

<ul class="link-list">
<li><a href="https://">twt</a></li>
<li><a href="https://">spotify</a></li>
<li><a href="https://">ask me</a></li>
</ul>

<div class="overlayr0">
<div class="textr0">
<center>
<mark>Elroseria</mark>
<br/>
<br />
Candy gummies macaroon gummi bears marshmallow dragée.
Croissant jujubes bonbon oat cake dragée sugar plum. Marshmallow
donut oat cake muffin cheesecake lollipop apple pie apple pie <br/>
image shake on hover to reveal scrollbox version 2 <br />
<a href="https://liveweave.com/Rj1zVV">code</a>
<br />
Candy gummies macaroon gummi bears marshmallow dragée.
Croissant jujubes bonbon oat cake dragée sugar plum. Marshmallow
donut oat cake muffin cheesecake lollipop apple pie apple pie <br/>
image shake on hover to reveal scrollbox version 2 <br />
<a href="https://liveweave.com/Rj1zVV">code</a>
<br />
Candy gummies macaroon gummi bears marshmallow dragée.
Croissant jujubes bonbon oat cake dragée sugar plum. Marshmallow
donut oat cake muffin cheesecake lollipop apple pie apple pie
</center>
</div>
</div>
</div>
</center>

<a href="https://vivante.carrd.co/"><ion-icon name="heart-circle-outline" style="font-size: 17px; color: black; position: fixed; bottom: 3px; left: 10px;"></ion-icon></a>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>