30/3/15

Cómo hacer que las fotos de tu blog se vuelvan más claritas al pasar el ratón por encima

Algo que parece que está de moda es lo de que al pasar por encima de una foto con el ratón, ésta se aclare un poco.

No tengo claro muy bien el motivo (si se usa un botón de Pin It como en este caso, lo puedo entender, porque así se ve un poquito más el botón de Pinterest), pero bueno, será solo una moda.

Me lo habéis preguntado unas cuantas y traigo por tanto tutorial.

Fijaos de lo que hablo por cierto (pasad el ratón por encima para ver el efecto):


Las que habéis hecho mi curso de iniciación ya sabéis lo que es el CSS o Cascade Style Sheet.

Es una hoja de estilo (Style Sheet) en la que podemos introducir ciertas órdenes (en código) y que éstas se realicen en cascada, es decir, actuando en varias a la vez.

O sea, yo puedo hacer una cosa determinada en una parte de mi blog (aquí en un post cambiando la vista a html, en un gadget lateral, etc.) o puedo poner una orden en mi hoja de estilo en cascada diciendo que quiero que todos mis posts, tal. O que todos mis gadgets de la columna, cual.

¿Me seguís?

Entonces, con esto igual.

Podemos hacer un cambio "general" o individual. Vamos allá:

CAMBIO GENERAL:

1) Ir a Añadir CSS y añadir el siguiente código

.post-body img:hover {
opacity:0.5;
}

Cambiando el numerito 0.5 por lo que vosotras queráis.

0.1 hará que prácticamente no se vea la foto de debajo:


Y 0.9 hará que apenas se aclare:


A mi 0.5 me parece razonable. Ni pa ti ni pa mí ;)

2) Guardar

¿Ventajas y desventajas?

Ventaja → Que con hacerlo una única vez vale

Desventaja → Que nos aclarará las imágenes de todos los posts. Todo lo que va en el post. Es decir, si tenemos una firma en el post (como yo), nos la aclarará. Si ponemos un separador dentro del post, etc.

CAMBIO MANUAL INDIVIDUAL:

1) Subimos la foto a nuestro post como de costumbre

2) Cambiamos al a pestaña HTML y localizamos la foto. Mi foto se llama 'foto tiffany' así que lo que hago es darle a Ctrl + F y escribir tiffany para localizarla

3) Me fijo en ese barullo de código y localizo donde dice src (que las que habéis hecho el curso intermedio ya sabéis que es la fuente de la foto) y le pego el siguiente código justo delante de src

onmouseout="this.style.opacity=1;this.filters.alpha.opacity='70';" onmouseover="this.style.opacity=0.1;this.filters.alpha.opacity='50';"

Luego le doy a un espacio si eso

Mirad:


Mi código dice 0.1 porque estoy ahora haciendo lo del ejemplo de arriba, pero vosotras deberéis poner:

onmouseout="this.style.opacity=1;this.filters.alpha.opacity='70';" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity='50';"

O lo que queráis. 0.5, 0.6, 0.7...

3) Una vez pegado eso, cambias de nuevo a la vista redactar y seguís el post como de costumbre.

¿Ventajas y desventajas?

Ventaja → Que solo nos aclarará las fotos que queramos, evitando que nuestros separadores, botones de compra como tengo aquí los de Paypal, citas o frases a destacar como aquí, títulos que hagamos que sean imagen, etc. lo hagan también

Desventaja → Que hay que molestarse en hacerlo cada vez, pues si bien no es mucho tiempo, hay que acordarse.

Y eso es todo amigos, espero que os haya gustado.

Nos vemos el jueves :)

Besiiiiis,
Blogger | Email  | RSS Bloglovin' | Feedly 

Únete a mi newsletter para recibir cada semana un resumen con trucos y recursos

14 comentarios

  1. Muy xulo el tuto, pero precisamente a mí no me gusta nada ése efecto, me da mucha rabia porque se ven peor las fotos

    ResponderEliminar
  2. Que chulo el tutorial, gracias Blanca!!!
    Besines
    by Ana Minaya

    ResponderEliminar
  3. Vaya, para todas las fotos no lo quiero, y para hacerlo en un solo post... si que es bonito el efecto, pero no lo veo muy ponible en mi blog)
    Si te lo han pedido sera que lo quieren.
    Gracias por el tutorial, es muy facil de hacer.
    Un saludo.

    ResponderEliminar
  4. ummm me parece una chorrada no creo que lo utilice

    ResponderEliminar
  5. ¡Esta genial! Y oh, por cierto. ¿Como consigo una plantilla tan cool como la tuya? ¡He buscado por todas partes, y solo hay aguadas y nada femeninas. ¿Alguna ayudita sobre eso?

    ResponderEliminar
    Respuestas
    1. Lo mio no es una plantilla. Bueno, es la plantilla simple de blogger modificada por mi.

      Tengo varios blogs prediseñados a la venta, que si te gusta mi blog, te encantarán.

      Puedes verlos entrando aquí: catálogo de blogs prediseñados.

      Eso sí, ten en cuenta que no son plantillas que revendo como hace el resto de la gente en Internet. Sería un blog único para ti, que nadie más tendría, pero de ahí que sean más caras que otras plantillas que encontrarás a la venta

      Un abrazo Diana

      Blanca

      Eliminar
  6. Wow!! Súper buena idea!!!
    A mi estas cosas me encantan!
    Gracias Blanca!

    ResponderEliminar
  7. Me encanta tu blog, no tengo muchos seguidores en el mio, me gustaria que se sumen, denle un vistazo mi direccion es :momentos258.blogspot.com.ar

    ResponderEliminar
  8. gracias! justo lo que buscaba. Una dudilla, ademas de que se aclare la imagen al poner el cursor encima, se puede hacer que a la vez en la imagen clarita salga algo escrito? por ejemplo nombre y precio que es lo que yo quiero hacer. No se como se hace.

    ResponderEliminar
  9. Hola!
    Lo primero muchas gracias por la información, y lo segundo... Llevamos un rato buscando "CSS" y no lo encontramos por ningún lugar; nos harías el favor de decirnos dónde se encuentra? :)

    ResponderEliminar
    Respuestas
    1. En el diseñador de plantillas

      Zona diseño - diseñador de plantillas - avanzado - añadir css

      Eliminar
  10. Gracias! me ayudo mucho y super bien explicado!!

    ResponderEliminar
  11. Muchas Gracias.
    Cada vez que necesito modificar cosas en el blog que no entiendo, siempre encuentro en tu blog lo que necesito.
    ;-)

    ResponderEliminar

© Personalización de Blogs. Diseño: Eve y Blanca.