heart hover (version 2)

<html>
<style>
<!-- please cr kumbhira if using, cr baekhyun for the lace border ♥ -->

<!-- please only change the bg color here! -->
.zoomsmall {
position: absolute;
z-index: 70;
top: 11em;
left: 10.7em;
padding: 50px;
background-color: #f7cdd7;
transition: transform .2s;
width: 300px;
height: 300px;
margin: 0 auto;
-webkit-mask-image: url(https://i.imgur.com/5OI7DN7.png);
-webkit-mask-size: 50%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}

.zoomsmall:hover {
-ms-transform: scale(1.5);
-webkit-transform: scale(1.5);
transform: scale(1.5);
}

<!-- please only change the bg color here! -->
.zoombig {
position: relative;
z-index: 60;
padding: 50px;
background-color: #e1759d;
transition: transform .2s;
width: 600px;
height: 600px;
margin: 0 auto;
-webkit-mask-image: url(https://i.imgur.com/5OI7DN7.png);
-webkit-mask-size: 50%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}

<!-- you can change the text color , font and size by changing "color", "font-family" and "font-size" respectively. remove the code from "-ms-overflow-style" to "scrollbar width" if you want a scrollbar-->
#scroll {
opacity: 0;
position: absolute;
width: 94px;
height: 64px;
top: 110px; <!-- you'll probably have to adjust this if you change the font size -->
left: 105px; <!-- you'll probably have to adjust this if you change the font size -->
padding: 2px;
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; <!-- you can change this to another border-->
<!-- remove this part if you want a scrollbar -->
-ms-overflow-style: none;
scrollbar-width: none;
<!-- remove this part if you want a scrollbar -->
overflow-y: scroll;
background: white;
font-size: 10px;
font-family: times;
color: #000;
text-align: center;
}

<!-- remove this if you want a scrollbar -->
#scroll::-webkit-scrollbar {
display: none;
}

.zoomsmall:hover #scroll {
opacity: 1;
}
</style>
</head>
<body>

<div class="zoombig"></div>
<div class="zoomsmall">
<div id="scroll"> info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info info</div>
</div>
</body>
</html>