Iniciativa al Estilo Blogger: Efectos para las imágenes de tu blog! (1) [Tutorial]

Hiii chic@s! :D Pooor fiin es viernes *w* esta semana no eh podido publicar mucho D: pero bueno, ya viene el fin de semana y intentare publicar cositas *w* jajajaa
Bueno, hoy os traigo la entrada que me toca de la iniciativa "Iniciativa al Estilo Blogger"! Para las que no lo conozcan; en esta iniciativa se sortean diversos tipos de entradas [tutos, recursos, entrevistas, reseñas, etc.] y la que toque pues se publica! Así cada semana podemos publicar al menos una cosa en nuestro blog :D Me encanto la idea así que aquí os traigo la primera entrada... Esta semana ha tocado un Tutorial! Así que aquí lo tienen....

¡EFECTOS PARA LAS IMÁGENES DE TU BLOG!

 A continuación os dejare algunos de los efectos que más me gustan!

◕~Efecto Rainbow~◕

Al pasar el cursor por encima de cualquier foto de blog, la imagen cambiara de colores

durante unos segundos y luego volverá a su color original!

Para ponerlo en tu blog debes ir a...

Plantilla > Editar HTML > Y busca [Ctrl + F] este código:

]]></b:skin>

Una vez lo tengas, pega este código justo encima

img {

filter: hue-rotate(360deg);

-webkit-filter: hue-rotate(360deg);

-moz-filter: hue-rotate(360deg);

-webkit-filter;(1);

-webkit-transition: all 0.7s linear;

-moz-transition: all 0.7s linear;

transition: all 0.7s linear;}

img:hover {

filter: hue-rotate(0deg);

-webkit-filter: hue-rotate(0deg);

-moz-filter: hue-rotate(0deg);

-webkit-filter;(0);}

◕~Redondear las imágenes de tu blog [Efecto1]~◕

Para redondear como en la imagen de arriba ↑↑ todas las imágenes de tu blog debes ir a

Plantilla > Editar HTML > Y busca [Ctrl + F] este código:

]]></b:skin>

Una vez lo tengas, pega este código justo encima

img {
padding:0px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear;
}
img:hover {
padding:0px;
border-radius:0px;
}

◕~Redondear las imágenes de tu blog [Efecto2]~◕

↑↑Para poner este efecto en las imágenes de tu blog ↑↑

Para rondondear como en la imagen de arriba todas las imágenes de tu blog debes ir a

Plantilla > Editar HTML > Y busca [Ctrl + F] este código:

]]></b:skin>

Una vez lo tengas, pega este código justo encima
img {
padding:0px;
-webkit-border-radius: 50px 10px 50px 10px;
-moz-border-radius: 50px 10px 50px 10px;
border-radius: 50px 10px 50px 10px;
}
img:hover {
padding:0px;
border-radius:0px;
}

Y entonces, al darle a Guardar, podrás ver el efecto en tu blog.

Os gusto~? :D Espero que si ^^

Aquí os dejo los créditos: X & X

Bye bye♥