HTML, CSS and JavaScript playground

div {
        display: block;
    }

#wrap-image {
        width: 100px;
        height: 100px;
        -webkit-mask-size: 250%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/A_perfect_SVG_heart.svg/200px-A_perfect_SVG_heart.svg.png);
        mask-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/A_perfect_SVG_heart.svg/120px-A_perfect_SVG_heart.svg.png);
        transition: all 0.5s ease;

}

#wrap-image:hover {
        -webkit-mask-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/A_perfect_SVG_heart.svg/200px-A_perfect_SVG_heart.svg.png);
        mask-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/A_perfect_SVG_heart.svg/120px-A_perfect_SVG_heart.svg.png);
        -webkit-mask-size: 100%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        transition: all 0.5s;
    }

.image-container {
        filter: drop-shadow(0 0 1px #FE00AE) drop-shadow(0 0 2px #FE00AE) drop-shadow(0 0 3px #FFB0CF);
        width: 100px;
        height: 100px;
        transition: 0.5s;
        -o-transition: all 0.5s ease-out;
        -webkit-transition: all 0.5s ease-out;
        -moz-transition: all 0.5s ease-out;

}

#wrap-image02 {
        -webkit-mask-image: url(https://files.catbox.moe/4ltr72.png);
        -webkit-mask-size: 250%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        transition: all 0.5s;
        width: 100px;
        height: 100px;
    }

#wrap-image02:hover {

-webkit-mask-size: 100%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        transition: all 0.5s;

}

#wrap-image03 {
        -webkit-mask-image: url(https://files.catbox.moe/4ltr72.png);
        -webkit-mask-size: 250%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        transition: all 0.5s;
        width: 100px;
        height: 100px;
    }

#wrap-image03:hover {

-webkit-mask-size: 100%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        transition: all 0.5s;
</style>

Check out our Python playground!