Colocar efectos a las imágenes del post.

|| ||
live while we're young ♥ Les't go crazy crazy crazy crazy *-----* ♥ el próximo mes ¡bógota! ajdahkdjahdnjks

¡Hey chicas y chicos! ¿Qué onda? Os habla carolina ♥ ya casi son las 8 O.o así que hago esta entradita rápida para irme a la catequesis :D

Ok ahora una chica llamada Manu no se si sea su nombre real (?) me dijo
"oye como se llama el efecto que tienes en las imágenes que se balancean" 
Entonces me decidí hacer este tutorial :)

Ejemplo: Pasa el cursor por la siguiente imagen



Al colocar el cursor se agranda y se quita la opacidad no? pues vamos aprender a colocar estos efectos no solo a todo el blog, solo a las imágenes de los post :)

En las imágenes de los posts
Es muy fácil este tutorial, solo es cuestión de entenderlo bien
Bien, saben que algunos efectos que os gustan, en todo el blog se ve un desorden errores etc. y solo quieres colocarlas a las imágenes del post ¿no? mira siempre el código de las imágenes lleva esto

Img {...)

Pues esta vez antes de ese código agregaremos el siguiente código antes de img {..}

.post-body

De tal manera que quedaría así

.post-body img {...}

Eje.



Recuerda, si el efecto tiene un img:hover agrega .post-body antes de el.

.post-body img:hover {...}

Efecto en una sola imagen determinada
Esta vez no a todas las imágenes de los post, solo a una, la que tú quieras.
Como firmas, mini gifs etc.

Antes de ]></b:skin colocaremos este código

img#SINefecto {  

Aquí el efecto

img:hover#SINefecto {

Aquí el efecto hover


Después iremos a la entrada y en formato html colocaremos esto;

<img src="AQUI LA URL DE TU IMAGEN" />

A ese código ↑ le agregaremos un id="Sinefecto"

Quedaría así: 

<img src="AQUI LA URL DE TU IMAGEN" id="SINefecto" />

También puedes agregar este ultimo paso a un gadget para que no afecte una imagen del sidebar o otra parte.
Efectos en imágenes: x

Créditos: x

¡Besos!

6 comentarios:

  1. no entendi donde esta el codigo que cabeza dura soy

    ResponderEliminar
  2. esta muy chulo los efectos, gracias por ellos!!! x3
    y el nuevo look del blog es muy chulo, es tan aahshfsag (? *-*
    saluditos! ^^

    ResponderEliminar
  3. Muchas gracias Caro , muy buen tuto :D
    Saludos!!! ^^

    ResponderEliminar
  4. Waaa que cute super interesantee!!!
    Besos~
    ^3^

    ResponderEliminar

Tu comentario me haría muy feliz!! :D