heart hover (version 1)

<html>
<style>
<!-- please cr kumbhira if using ♥ -->

<!-- please only change the bg color here! -->
.zoomsmall {
position: absolute;
z-index: 70;
top: 7.4em;
left: 11.8em;
padding: 50px;
background-color: #f7cdd7;
transition: transform .2s;
width: 320px;
height: 320px;
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.-->
#scroll {
opacity: 0;
position: absolute;
margin-left: 4%;
width: 150px;
height: 140px;
top: 10.2em; <!-- you'll probably have to adjust this if you change the font size -->
left: 8em; <!-- you'll probably have to adjust this if you change the font size -->
padding: 33px;
overflow-y: scroll;
<!-- remove this part if you want a scrollbar -->
-ms-overflow-style: none;
scrollbar-width: none;
<!-- remove this part if you want a scrollbar -->
background-color: white;
font-size: 9px;
font-family: times;
color: #000;
text-align: center;
-webkit-mask-image: url(https://i.imgur.com/5OI7DN7.png);
-webkit-mask-size: 90%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}

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

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

<div class="zoombig"></div>
<div class="zoomsmall">
<div id="scroll">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
</div>
</div>
</body>
</html>