Efeito hearteando

De qualquer modo, o efeito de hoje tem o nome hearteando porque, ao passar o mouse, a imagem ficará toda aos coraçõezinhos. Não há segredo nenhum nisso: é só uma shape que eu criei, ou seja, "mask-image". Também ficará cinzenta, mas isso podem retirar facilmente, apagando a linha. Enfim, poderão ver melhor na prévia, o que eu mais adoro é que os corações aparecem com graduação, fica bem engraçado >.<

1) No HTML procure por ]]>< e acima dele cole: 

.heart {
-webkit-mask-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI2TNhU3jwM0_2jA28mwCyC9W8kVW4RZCJWqYzo4KcK2z3LaVm_b_8Pnb_8xnZJIpRKF5JKkb5v88iFpf3SRqSjUSQNDy_Fk-v4BD9PHHUw8Qg8BMjpieGLbHZ5bZ3J_G5oAarlxfezEB9/s200/Sem+t%C3%ADtulo.png);
border-radius: 10px;
-webkit-filter: sepia(0.2) saturate(0.8);
-webkit-transition-duration: .60s;
}
.heart:hover {
-webkit-filter: sepia(0) saturate(0);
-webkit-mask-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP6fg7DQDcn9JJu8FcevVneRD6h07rYaRde78pHlXiSfAd09XnmDzTPPYR5Rf8RYDHUzhVJWZ_splkzJEZdtKHf4kh9M2Q91eW78c46FXYPXHbw6zhjqRfWSvw52KY3tQtUKgJHtWFY4vh/s1600/teste.png);
-webkit-transition-duration: .60s;
}

2) Agora em um Gadget cole:

<img src="URLDAIMAGEM" class="heart" />