additional content when hovered + recommend instructions. cr itzhuo pls

<!-- additional content that show up when hovered by xio! cr @itzhuo (and @baeyhkun for lace border). dont repost on other pastebins pls n thank uuuu -->


<head>
/*if you want to put some google font do it here!*/

<style>
@font-face { /*you can change the custom fonts for all the one u like just make sure that don't get things mixed up in the final part hehe */
font-family: Magica;
src: url(https://static.tumblr.com/p6yopnt/Qkiqnu0r5/theheart.ttf);
}

@font-face {
font-family: lovely;
src: url(https://dl.dropbox.com/s/xde2bkhiie1bm8r/LovelyRegular.ttf);

}
#lovely {
font-family: lovely;
font-size: 30px;
text-align: center;
-webkit-text-stroke: 1px black; /*you can put the normal text-shadow here too!*/
color: white;
}
/* put the rest of your custom font here! */

.card { /*container! i'd recommend you to just change the border pls*/
width: 310px;
height: 290px;
padding: 0;
box-sizing: border-box;
overflow: hidden;
border-width:7px;
border-style:solid;
border-image: url("https://media.discordapp.net/attachments/826854899013648384/839700444375810078/tumblr_inline_o98n9dbCl61u2r0ws_540_1_2.png") 8 fill round;
}

.card * {
transition: 0.3s ease all;
}

.card img { /*i'd recommend u to not change this but if u want u can mess aroung with the width or height */
margin: 0;
width: 300px;
height: 240px;
object-fit: cover;
display: block;
}

#scroll { /* u can change the font, background, text aling. i'd recommend u to not change padding, height and overflow :D */
padding: 5px;
height: 110px;
overflow:hidden;
background: white;
font-size: 15px;
font-family: 'Times';
font-weight: bold;
color: #000;
text-align: center;

}
.card p {
margin: 0;
line-height: 1.5;
}

.card:hover img, .card:focus-within img {
margin-top: -80px;
}

.card:hover h3, .card:focus-within h3 {
padding: 8px 12px 0;
}

a { /* u can change this link for another! */
font-family: Magica;
text-decoration: none;
color: white;
font-size:25px;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;

}
a:hover {
webkit-filter: blur(1px);
filter: blur(1px);
}
</style>
<div class="card">
<img src="your.img.URL">
<div id="lovely">YOUR TITLE!</div>
<div id="scroll"> your text goes here your text goes here your text goes here your text goes here your text goes here your text goes here your text goes here your text goes here your text goes here /* make sure to not put too much info or the additional content won't work T__T just put the basic */
<div id="hover"><a href="#i">1</a> <a href="#i">2</a> </div> </div>
</div>
</div>