/* the image and the scroll box have to go into a column container, 25% left (image) and 75% right (sc), in the bg options change it for an image, all the codes go in different embeds in ur carrd */

/* image code */
<style>
.pinky {
position:relative;
z-index:1;
border-width:7px;
border-style:solid;
border-image: url("https://i.imgur.com/NJa4bp2.png") 8 fill round;
}
</style>

<img class=pinky src="https://dl.dropbox.com/s/kh59o3iz09oyxgy/6FCFEF90-7E70-40F5-B850-12E3F5F3B1F3.jpeg" alt="." style="width:100px;height:auto;">

/* scroll box code */
<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:wght@500&display=swap" rel="stylesheet">
<style>
#scroll1 {
height: 90px;
width: 85%;
padding: 7px;
border-radius:9px;
font-size: 13px;
font-family: 'Mali', cursive;
overflow: auto;
background-color:#fff;
position:relative;
left:27px;
top:5px;
transition: width 1s, height 1s;
}
#cont:hover #scroll1 {
height: 190px;
width: 120%;
transform-origin: 50% 50%;
z-index: 8;
position:absolute;
left:-35px;
background-color: white;
top:-37px;
border:double 8px #FFEBF1;
}
</style>
<div id="cont">
<div id="overlay"> </div>
<div id="scroll1">
info goes here
</div>

/* note */
<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:wght@500&display=swap" rel="stylesheet">
<style>
#note {
font-family: 'Mali', cursive;
color:#000;
position:relative;
top:5px;
}
</style>

<div id="note"> cr to abracitos on whi!</div>

<!--dont remove this!--->