cr ciarispop (NOT MY CODE)

<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=Mali&display=swap" rel="stylesheet">

</head>

<style>

#cont { /*container! i'd recommed u only change the border eheh */
width: 300px;
height: 300px;
border: 4px double black;
border-radius: 12px;
position: relative;
margin-left: auto;
margin-right: auto;
}

.imgbg { /* image made to fit no matter the size! */
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 9px; /*for an image to fit make it -3px than the border-radius of the #cont*/
}

@font-face {
font-family: squidgy;
src: url(https://dl.dropbox.com/s/jwobi0mfqf17x7b/SquidgySweets.otf);
}

#float { /* floating text, u can change this! */
position: absolute;
width: 100%;
left: 0;
top: 100px;
text-align: center;
z-index: 1;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
font-family: squidgy;
font-size:40px;
font-weight:bold;
color: #fff;
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

@keyframes floating {
0% { transform: translate(0, 0px); }
50% { transform: translate(0, 15px); }
100% { transform: translate(0, -0px); }
}

#scroll {
/* scrollbox! u can change this! note: mess around with the 'margin-left' depending on the width or if u change anything of the scrollbox bc it messes a bit */
opacity: 0;
position: absolute;
margin-left: 7%;
width: 250px;
top: 140px;
border: 1px solid black;
border-radius: 10px;
padding: 10px;
height: 110px;
overflow: scroll;
background: #FFFFFF90;
transition: opacity .35s ease;
/* style of the text inside scrollbox */
font-size: 15px;
font-family: 'Mali', cursive;
color: #000;
text-align: center;
}

#cont:hover #scroll {
opacity: 1;

}

#overlay { /* overlay! (blue in this case) (hidden without mouseover) */
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(199, 234, 252, 0); /*copy the color of ur choice in rgb! the last digit stands for opacity*/
overflow: hidden;
width: 0;
height: 100%;
transition: background 0.5s ease;
border-radius: 9px;

}

#cont:hover #overlay { /* overlay when hovered! (it appears) */
width: 100%;
background: rgba(199, 234, 252, .2); /*copy the color of ur choice in rgb! the last digit stands for opacity*/
transition: background 0.5s ease-out;
}

</style>

<div id="cont">

<img class=imgbg src="https://cdn.discordapp.com/attachments/851155413831254076/911036390203064350/original_2.jpeg">
<div id="float"> NAME! </div>
<div id="overlay"> </div>
<div id="scroll">
scroll!
<br></br>
your info goes here your info goes here your info goes here your info goes here your info goes here your info goes here your info goes here your info goes here your info goes here your info goes here your info goes here your info goes here your info goes here your info goes here your info goes here your info goes here your info goes here your info goes here your info goes here your info goes here your info goes here your info goes here your info goes here your info goes here
<br></br>
© ciarispop for the code!
</div>
</div>