new & improved hover heart code

by gael

HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
transition: all 0.5s;
position: relative;
width: 40%;
margin:auto;
-webkit-mask-image: url(https://dl.dropbox.com/s/2kih8ox9q2czjeg/pngfind.com-kawaii-transparent-png-621355.png);
-webkit-mask-size: 220%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}

.image {
transition: all 0.5s;
display: block;
width: 100%;
height: auto;
}

.container:hover {
transition: all 0.5s;
-webkit-mask-image: url(https://dl.dropbox.com/s/2kih8ox9q2czjeg/pngfind.com-kawaii-transparent-png-621355.png);
-webkit-mask-size: 100%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}

.overlay {
transition: all 0.5s;
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgb(255,214,230);
background: radial-gradient(circle, rgba(255,214,230,1) 0%, rgba(255,168,202,1) 49%, rgba(255,170,204,1) 83%);
overflow: hidden;
width: 100%;
height: 100%;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: .3s ease;
transition: .3s ease;
-webkit-mask-image: url(https://dl.dropbox.com/s/2kih8ox9q2czjeg/pngfind.com-kawaii-transparent-png-621355.png);
-webkit-mask-size: 100%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}

.container:hover .overlay {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}

.text { line-height:1em;
color: white;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
font-family: sant joan;
font-size: 30px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}

a { line-height:.875em; color: white;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
font-family: sant joan;
font-size: 30px; text-decoration: none }

a:link, a:visted { line-height:.875em;
color: white;
text-shadow: -1px 0 #000, 0...