Efecto Hover: Pixel Heart |♥

7 de febrero de 2015


Holi a todos mis angelitoshoy 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.

4 comentarios:

  1. De verdad me encantó el tuto! Super original, seguramente lo use en nuevos diseños (≧◡≦)
    Gracias por publicarlo!♥
    Saludos~

    ResponderEliminar
  2. no conocía la propiedad mask-image, se me ocurren algunas formas de utilizarlo...
    Gracias por la información.

    ResponderEliminar
  3. Está super bello el tutorial , de veras me encantó , gracias por compartir <3

    ResponderEliminar
  4. A y Angel me preguntaba si te podía afiliar , sería lindo , besos
    PD: Te pondré en Big Friends porque amo tu blog y me haz caído muy bien :)

    ResponderEliminar
Muchas gracias por dedicarle tu tiempo a mi blog! Espero que la entrada te haya gustado y no dudes en dejar tu opinión en un comentario ♥ (Por favor no dejes spam)