Personalización de Blogs Idea guardada 0 veces
Sé la primera persona en valorar esta idea Valorar

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

¡Gracias por suscribirte! Mil besos, Blanca

Fuente: este post proviene de Personalización de Blogs, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Recomendamos

Relacionado

general diseño de blogs

Cómo quitar la sombra, de solamente algunas fotos de blogger

A estas alturas de la vida, os habréis dado cuenta ya que la plantilla simple de blogger (la que a mi más me gusta, porque tal y como su nombre indica es muy sencilla, y se puede personalizar muy bien) trae por defecto una sombrita alrededor de las fotos: Personalmente me gusta, de ahí que no la haya quitado, pero es verda que en algunas cosas queda un poco rara, porque muchas cosas son imagen. ...

general redes sociales

Cómo hacer que la gente pinee una foto vertical en Pinterest si el el blog es horizontal

La mayoría de vosotras, como sé que tenéis blogs de cosas bonitas y/o llamativas a la vista (cocina, repostería, manualidades, costura, moda, belleza, decoración, viajes, etc.) entiendo que estaréis utilizando Pinterest como método de promoción de vuestro blog. Y si no es así, ¡eso hay que cambiarlo! Os recomiendo encarecidamente que os pongáis las pilas con esta red, pues la usan ya más de 70 mil ...