Efeito hearteando

Tadaima ^^

Sem delongas na apresentação, sabem que me ando a dedicar a criar efeitos de imagens? Já tenho vários que pretendo postar em breve, e acho que estão bem originais, além de não serem complicados de fazer. Efeitos de imagem são sempre úteis, porque dá para variar bastante e fazem toda a diferença num layout, e como eu adoro perder tempo a ver o resultado de inventar uns códigos, é o hobbie perfeito para mim :3

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 >.<

Prévia (www):

Código:

Dê Ctrl+F e procure por:

/b:skin

Acima cole:

.heart {
-webkit-mask-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKZ2lO7zEbvaQwE4ehljtBPMUwr82v019jFH15ntPWfB8w9f42WXOXg8GxYcMaL2Zi8XgzRh8x7-cTwAwYsk_BqaqrBYHfuj2z-1LwZnPE9wu6NC0fI1taKKxkSvnNBuUhxYaZsplghq2y/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/AVvXsEgtaDePxEDeNUOVI-VdgvEfEAOlTtU6U1wuIiDIErk72XN9nQ4ZwmyTqWCs7uRBr5c7GI3mLGoqC63RAFuArNsicsLAGk8puF0FrrG2uXVUDU1NuZKBDqP0eNJgwtHJMqBUnJPZCCYdfE0_/s1600/teste.png);
-webkit-transition-duration: .60s;
}

Para aplicar, é como sempre, só escreva em algum gadget:

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

Ja nee ^^