Efecto Hover - Imágenes borrosas en tus posts


Bendeciré a Jehová que me aconseja;
aun en las noches me enseña mi conciencia.
A Jehová he puesto siempre delante de mi;
porque está a mi diestra, no seré conmovido.
Salmo 16:7-8

Hola.. hola mis chulas chocolatosas, ¿como estan?, espero en Dios que bien!!
Yo de nuevo por acá para traerles como siempre algo bien chulo para que pongan chulis su blogge. Pero primeramente Feliz Navidad, espero lo hayan pasado super bien junto a sus seres queridos. Y bien, hoy quiero compartirles un tutorial que en lo personal me encanta mucho como se visualiza su efecto en las imágenes de las entradas del blog.

Se trata de un efecto hover para las imágenes de los posts.
No daré más detalles.. Mejor sigue conmigo y te enseño como hacerlo..
Es hiper mega simple de hacer y te encantará como se verán las imágenes en tus posts. Aquí una PRUEBA

Vamos conmigo y te enseño corazón.. Let's go..

  1. Primeramente este tuto es para blogs de blogger, segundo, sí porque sí haz una copia del código de tu plantilla, por cualquier error que cometas, poder tener el código a salvo. Para mi la mejor forma de hacerlo es seleccionar todo el código de tu plantilla y copiarlo, luego lo pegamos en un blog de notas. Lo dejamos reservado a un lado a la mano por cualquier cosa. Esto es bien simple, pero si eres nulo con los códigos en blogger, por eso te sugerimos seguir este paso, asi no pierdes nada en tu plantilla.
  2. Nos dirigimos a nuestra Plantilla
  3. Editar html
  4. Hacemos clic dentro del código html
  5. Y luego presionamos CTRL + F
  6. Se mostrará un mini buscador en la parte superior derecha dentro del recuadro del código html
  7. Allí pegamos lo siguiente: ]]></b:skin
  8. Y presionamos Enter en el teclado para buscar
  9. Una vez encuentres esto ]]></b:skin en tu plantilla, pegamos justo encima el siguiente código:


.post img {
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.post img:hover {
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
-webkit-filter: blur(2px);
color: #FF1493;
}


Con esto habrás agregado el efecto hover para las imágenes de tus posts. Recuerda que no es recomendable modificar este código a no ser que seas un experto en codificación y sepas bien cómo hacerlo. Lo único editable que puedes modificar el lo que en el mismo está resaltado en negrita y amarillo.

Si el código agregado antes de ]]></b:skin no te funciona como me pasó a mi (no se porque, pero bueno..), intenta ponerlo donde inicia esta sección de códigos, es decir, donde inicia la zona de los estilos css de tu código html. Mayormente esto es después del código mobile que trae tu plantilla. Lo ponemos justamente después de donde termina tu código mobile. Aquí un ejemplo:

Click aqui para ver la imagen en tamaño real

Espero mis chulas este efecto les guste tanto como a mi, de ser así no te olvides comentar. Igualmente están pendientes a las demás variantes de este que prontamente estaremos compartiendo contigo!!
Que Dios les bendiga mucho, mucho!!



Confía En Cristo • Tu Jardín De Fe
Vanessa Martinez © 2012-2018

No hay comentarios.:

Bendicenos con un comentario

๑ ALGUNOS PUNTOS A TENER EN CUENTA ๑
♣ ~~~~~~~~~~~~~~~~~~~~~~~~~~♣
❥ Un corazón agradecido siempre sabe decir gracias..
❥ Y la forma más fácil de decirlo es a través de tus comentarios..
❥ Al hacerlo se cordial, respetuoso y de bendición a los demás..
❥ Deja la URL de tu blog para que podamos visitarte..
❥ Para agregar un enlace activo en los comentarios VER COMO AQUÍ
❥ Para insertar una imagen solo utiliza [img]URL de la imagen[/img]
❥ Para insertar un vídeo solo utiliza [video]URL del video[/video]
❥ Para cambiar color de texto utiliza [color="red"]Aquí tu texto[/color]
❥ Para crear marquesina utiliza [ma]Aquí tu texto[/ma]
❥ Por favor NO COPY, y si tomas algo recuerda los créditos!
❥ Por último, dile NO al Spam.. SPAM BLOCKED
❥ Los comentarios pasan por un sistema de moderación.
❥ Por tanto, NO se aprobarán los comentarios:
• con textos árabes
• con propagandas (spam)
• con ofensas a personas, publicaciones o marcas
❤ Y recuerda que si te gusta lo que hacemos, tan solo..:
❤ Comparte + Síguenos + Comenta!!
❤ Observa + Procesa + Inspírate + Crea = OPIC • NO COPY
❤ BE•ORIGINAL

✿ TUS COMENTARIOS ALIMENTAN MI BLOG Y SON CARICIAS DE DIOS A MI ALMA ✿

≧◔◡◔≦ (っ◔◡◔)っ ♥ ❤ ❥ ✿ ☂ ❣ ღ ツ ☼ ✿◕ ‿ ◕✿ ❀◕ ‿ ◕❀ ❁◕ ‿ ◕❁ (◡‿◡✿) (っ◕‿◕)っ (►.◄) ╍●‿●╍ (•_•) (◐.̃◐) (。◕‿◕) ..^.^.. ʕ•ᴥ•ʔ .^◡^. (≧◡≦) (-^o^-) (*^o^*) (O_O) (ˇ~ˇ) ಠ_ಠ (-_-) ZZzzz εїз Ƹ̴Ӂ̴Ʒ ✿❀❁°•~♂♀✉✔♚♛✝© ® ™

Gracias por tu visita
¡Hola Corazón de Fe... Anímate a Comentar!
Pues me gustaría saber tu opinión sobre este tema. Dejanos saber si el mismo ha sido de utilidad o de bendición para ti, asi como tambien, que otros temas te gustaria que tratemos.
SOLO RECUERDA: No se permiten mensajes ofensivos o que falten al respeto, tampoco spam, están permitidas las URL siempre y cuando opines también sobre la entrada y que tu enlace no sea spam ni inadecuado, pues de lo contrario será eliminado dicho comentario. Si mi hija de 10 años no puede leerte o ver lo que compartes entonces tu comentario no es bienvenido aquí.
¡Si me sigues.. te sigo devuelta!
Excepto aquellos blogs con contenido inadecuado.

♥ A la mayor brevedad respondemos los comentarios

Copyright © 2012-2018 CONFÍA EN CRISTO || Theme Base ๑ GGEORGELYS || Deco-Style and Effects ๑ KOKO KAWAII