yui crd emebed~!

<!--

                                                    __
                                                 d888b
                                                888888b
                                                8888888
                                                8888888
                                                8888888
                                     _          8888888
                                   ,d88         8888888
                            ____  d88' _,,      888888'
                           (8888\ 88' d888)     Y8888P
                           ___~~8 ~8  88~___    d8888
  _______              ,8888888        ~ 888888_8888
,8888888888===__    _,d88P~~               ~~Y88888'
88888888888888888888888'                        `88b
8888888888888888888888P                          Y88
`~888888888888~~~~~ 88                            88
    ~~~~~~~~        88                            88
                    88                            88
                    88                            88
                    88                            88
                    88    ,aa.            ,aa.    88
                    88    d88b            d88b    88
                  ,=88    Y88P            Y88P    88=,
                ,d88P'     `'     _aa_     `'     `Y88b,     ___
                88P'             (8888)             `Y88  ad88888b
                88                ~^^~                88 d88Y~~"Y8b
         _______"Yb._                              _.d8"d8Y      88
 ______,d88888888ba888=,.______________________.,=8888~d88_______88___
|~~~~~~88P~~~~~~Y88~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
|      88        88                                                   |
|      88        88                                                   |
|      88ba,___,d8P               MADE                                |
|       "888888888                 by                                 |
|          ~~~~~~             ¡ciarispop!                             |
|                    http://twitter.com/ciarispop/                    |
|                          credit appreciated                         |
|_____________________________________________________________________|
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

-->


<head>
<!--if you add a font of google fonts, add it here! -->

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600&display=swap" rel="stylesheet">
</head>


<!-- CSS -->


<style>
.main {
/* do not modify this! */

height: 220px;
width: 100%;
padding:10px;

/* border & bg only modify this!*/
background: white;
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;

/* do not modify this! */
overflow: hidden;
transition: 0.5s;

}

.main .activator {
/* do not modify this! */
height: 220px;
width: 100%;
float: left;
display: block;
transition: 0.5s;
}


.img {
/* CSS of your image! i'd recommend you don't modify this */
text-align: center;
height: 180px;
width: 100%;
object-fit: cover;
float: left;
margin-bottom: 10px;
transition: 0.5s;

}
.content {
/* do not modify this! */
display: none;
margin-top: 15px;
transition: 0.5s;

}
.main:hover {
/* CSS of the height after you hover it! i'd recommend you don't modify this */
height: 325px;
transition: 0.5s;

}
.main:hover .content {
/* do not modify this! */
display: block;
white-space: normal;
height: 350px;
transition: 0.5s;
}
.activator:hover .img {
/* do not modify this! */
float: left;
}

#scroller {
/* CSS of the scroll box ! (text) */


width: 100%;
margin-top: 10px;

/* THINGS THAT YOU CAN MODIFY */

/* you can change the font here */
font-family: 'Quicksand', sans-serif;
/* you can change the font size here */
font-size: 70%;
/* you can change the color of the font here */
color: black;

/* ------ */

padding: 5px;
transition: 0.5s;
overflow: scroll;
height:100px;

}
</style>

<!-- HTML -->

<div class='main'>
<div class='activator'>


<!-- add the link of your image here -->

<img class=img src="https://64.media.tumblr.com/af0ba9cfc8ec4fce0371acc3f2a5fb5d/8c436493c1c20170-f4/s540x810/b408af581d440ddc4b72833f25095f4b1b926bef.jpg">

<div class="content">
<div id="scroller">
<div align=left>

<!--here goes your text of the scrollbox!!! -->


your <strong> info </strong> goes here ~!


</div>
</div>

</div>
</div>
</div>