[Tutoriales] Marcos de Halloween para las imágenes

Holiii!!! Antes que nada quería comentarles que la sección de Storyteller será cada tres viernes (cada 21 días) en vez de el tercer viernes de cada mes ^^ Pero bueno, sigamos con lo que toca hoy, que es un tutorial, y dado que últimamente no tengo ni idea de que más tutoriales puedo hacer, les voy a poner coshitas para decorar su blog en halloween durante este mes, y hoy tocan ¡marcos para las imágenes!

Además, como son marcos bastante voluminosos, y dos de los tres (iba a hacer más pero no tuve tiempo), tiene efecto, los códigos están puestos para que solo afecten a las imágenes de los posts y las entradas ^^



Solo tienes que ir a Plantilla, Editar HTML, y buscar ]]></b:skin>, y pegar justo antes de eso el código que más te guste:

.post-body img {
padding: 20px;
border: 8px ridge purple;
background: black url(http://desmond.imageshack.us/Himg827/scaled.php?server=827&filename=halloween20125.png&res=landing)repeat bottom right / 5%;
outline-color: black;
outline-style: double;
outline-width: 4px;
outline-offset: -36px;
}

Normal

Ratón por encima

.post-body img:hover {
background-position: top left;
transition: all 0.5s ease-in-out 0s;
-webkit-transition: all 0.5s ease-in-out0s;
-moz-transition: all 0.5s ease-in-out 0s;
-ms-transition: all 0.5s ease-in-out 0s;
}
.post-body img {
padding: 33px;
background: whiteurl(https://yonosoygente.files.wordpress.com/2015/10/yo-no-soy-gente-historias-…ra-mejor-ahora-que-nunca-ahora-viene-lo-mejor-tener-40-es-lo-mc3a1s-69.png)no-repeat bottom right / 8%;
transition: all 0.5s ease-in-out 0s;
-webkit-transition: all 0.5s ease-in-out0s;
-moz-transition: all 0.5s ease-in-out 0s;
-ms-transition: all 0.5s ease-in-out 0s;
}

Normal

Se mueve el fondo

.post-body img:hover {
background-position: top left;
transition: all 0.5s ease-in-out 0s;
-webkit-transition: all 0.5s ease-in-out0s;
-moz-transition: all 0.5s ease-in-out 0s;
-ms-transition: all 0.5s ease-in-out 0s;
}
.post-body img {
padding: 33px;
background: whiteurl(http://cuentoscuanticos.files.wordpress.com/2013/02/hs-2009-28-b-large_web.jpg)no-repeat bottom right / 200%;
transition: all 0.5s ease-in-out 0s;
-webkit-transition: all 0.5s ease-in-out0s;
-moz-transition: all 0.5s ease-in-out 0s;
-ms-transition: all 0.5s ease-in-out 0s;
}

Espero que os hayan gustado!! El segundo es bastante simplón, pero ha mi me gustó cuando se mueve el murciélago!!
Beshus y hasta mañana!!