lace hover pink crd codes

<!--- CSS FOR NAME TEXT --->
<style>
@font-face {
font-family: good time;
src: url(https://dl.dropbox.com/s/ijxda4xb1cyjpe4/KGAlwaysAGoodTime.ttf);
}

#text01 {
text-shadow: -1px 0 #ed94b3, 0 1px #ed94b3, 1px 0 #ed94b3, 0 -1px #ed94b3;
color: #ffe5f2;
font-family: good time;
position: relative;
top: 0.5em;
z-index: 99;
}
</style>


<!--- MAIN CODE CREDIT TO CIARISPOP/CRDITEM) --->

<style>
@font-face {
font-family: 'cutie';
src: url(https://dl.dropbox.com/s/xo075bh6tbd4f7d/CP.ttf);
}

@font-face {
font-family: 'Magica';
src: url(https://static.tumblr.com/p6yopnt/Qkiqnu0r5/theheart.ttf);
}

.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://i.imgur.com/8Tk8PKV.gif") 7 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: 185px;
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;
font-family: 'Magica';
font-size: 0.9em;
color: black;
padding: 5px;
transition: 0.5s;
overflow: scroll;
height:100px;
}

mark {
/* CSS of mark ! (highlighted text) */
background: #ffe3ed;
font-family: 'cutie';
font-size: 1em;
color: #3c3c3c;
padding-left: 6px;
padding-right: 6px;
padding-top: 1px;
padding-bottom: 1px;
border-radius: 0.375em;
border: 1.5px solid black;
}

</style>
<!-- HTML -->
<div class='main'>
<div class='activator'>
<!-- add the link of your image here -->
<img class=img src="https://data.whicdn.com/images/172962196/original.jpg">

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

<!--here goes your text of the scrollbox!!! -->
<mark>about</mark> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
<br><br>
<mark>interests</mark> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
<br><br>
<mark>rules</mark> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
<br><br>
<mark>media</mark> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
<br><br>
<mark>music</mark> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
<br><br>
<strong>cr ciarispop for the code!</strong>

</div>
</div>

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