polaroid hover

<style>

@font-face {
font-family: PC98;
src: url(https://dl.dropbox.com/s/q6te1rmeglfy4bf/pc-9800.ttf);
}

.mom {
position: absolute;
bottom: 195px;
left: 160px;
width: 192px;
height: 280px;
border: 9px solid #ffffff;
border-radius: 4px;
box-shadow: 0px 0px 1px #666666;
background-image: linear-gradient(0deg, #ffffff 13%, #ffffff00 0%);
}

.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}

.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
bottom: -2%;
left: 50%;
width: 12em;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}

.mom:hover .image {
opacity: 0.3;
}

.mom:hover .middle {
opacity: 1;
}

.text {
background-color: #ffffffb3;
border-radius: 4px;
color: #424242;
font-size: 12px;
font-family: PC98;
height: 113px;
width: 160px;
overflow-y: scroll;
padding: 10px 5px 10px 5px;
position: relative;
bottom: 93px;
left: 23.5px;
}

@media only screen and (max-width: 600px) {

.mom {
position: absolute;
bottom: 220px;
left: 95px;
width: 185px;
height: 190px;
border: 9px solid #ffffff;
border-radius: 4px;
box-shadow: 0px 0px 1px #666666;
background-image: linear-gradient(0deg, #ffffff 13%, #ffffff00 0%);
}

.text {
background-color: #ffffffb3;
border-radius: 4px;
color: #424242;
font-size: 12px;
font-family: PC98;
height: 10.3em;
width: 158px;
overflow-y: scroll;
padding: 10px 5px 10px 5px;
position: relative;
bottom: -16px;
left: 9px;
}
}

mark {
background: #E8E0FF;
border: 1px solid #A6A6A6;
padding: 2px 6px;
border-radius: 10px;
font-family: PC98;
width: 67px;
position: relative;
}

</style>
</head>
<body>

<div class="mom">
<img src="https://cdn.discordapp.com/attachments/851155413831254076/1114211824217362513/Screenshot_2023-06-01_at_10.22.36_AM.jpg" class="image" style="width:100%; height: 230px;">
<div class="middle">
<div class="text">
insert your text here for your carrd
</div>
</div>
</body>