Holi a todos mis angelitos ♥ hoy les traigo un pequeño efecto que les permite poner a una imagen formas (como corazones, estrellas, etc.) al pasar el cursor por encima.. puede serles útil para sus afiliados o para cualquier uso que quieran darle.. Sin mas les dejo como es ..
Preview
Para tenerlo en tu blog debes ir a Plantilla | Editar HTML y colocar el siguiente código arriba de ]]></b:skin> y en plantillas clásicas arriba de </style>
.storm {
-webkit-transition:.6s;
outline-offset: -2px; /* Posición del borde */
outline: 1px solid #bbb; /* Estilo del borde */
max-width:49px; /* Tamaño máximo de la imagen */
box-shadow: inset 0 0 50px #bbb, 0 0 3px #bbb; /* Sombra de la imagen */
}
.storm:hover, .storm2:hover {
-webkit-transition:.6s;
outline-offset: -50px;
outline: 1px solid #fff;
-webkit-mask-image: url(http://i.imgur.com/wCFl65c.png); /* Forma hover */-moz-mask-image: url(http://i.imgur.com/wCFl65c.png); /* Forma hover */
-o-mask-image: url(http://i.imgur.com/wCFl65c.png); /* Forma hover */
mask-image: url(http://i.imgur.com/wCFl65c.png); /* Forma hover */
}
.storm2 {
-webkit-transition:.6s;
outline-offset: -2px;
outline: 1px solid #bbb;
max-width:50px;
box-shadow: inset 0 0 50px #bbb, 0 0 3px #bbb;
}
Una vez que lo haces guardas, y colocas en un gadget de javascripts {en plantillas clásicas solo colócalo en el lugar que lo quiers tener} lo siguiente:
<a href="url" target="_blank"><img class="storm" src="http://i.imgur.com/3g4puLP.png" /></a>
<a href="url" target="_blank"><img class="storm2" src="http://i.imgur.com/W7udCrR.png" /></a>
<a href="url" target="_blank"><img class="storm" src="http://i.imgur.com/3g4puLP.png" /></a>
Por si le quieren cambiar de forma solo deben pegar el link de una forma png en donde dice /* Forma hover */
Aquí les dejo alguna formas por si les sirve-
Da créditos si lo usas- el efecto es 100% creado por mi.
