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 

Otros tutoriales guays: 

1. Cómo cambiar el color del lightbox de blogger
2. Cómo ajustar las imágenes automáticamente al ancho de nuestro blog
3. Cómo cambiar el cursor del blog