¡Hola a todas/os! Hoy vengo cargada con un tutorial súper fácil pero muy, muy resultón, y es que no es otro que cómo añadir un efecto translúcido a nuestras imágenes. Si queréis aprender a añadirles esta trasparencia cuando los visitantes de vuestros blogs pasen el ratón por encima, seguid leyendo ;)
MINI TUTORIAL:Cómo añadir efecto translúcido a tus imágenes al pasar el ratón por encima
Esta vez solo debes ir a Plantilla | Personalizar | Avanzado | Añadir CSS. Después, pega el siguiente código:
.post-body img:hover { opacity:0.6; }
Este código afectará solo a las imágenes que pongas en tus posts. El nivel de transparencia lo puedes modificar simplemente aumentando el valor de la frase opacity:0,6; mientras más lo aumentes, mayor transparencia y a la inversa. Por ejemplo, mayor opacidad - opacity:0,4; menor opacidad - opacity:0,8;
Si lo que quieres es añadir este efecto a una imagen de tu sidebar (la columna lateral) tendrás que añadir la imagen como un gadget HTML. Te pongo un ejemplo:
He escogido el icono de Twitter. El código de la imagen es:
Ahora vamos a el efecto de transparencia. El código que vamos a utilizar es el siguiente:
class="blImagjtef" onmouseout="this.style.opacity=1;this.filters.alpha.opacity='100';" onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity='60';" }
Como en el código anterior, puedes modificar el grado de transparencia modificando el valor de opacity='60'. Este código lo tendrás que situar entre img border="0" y src="URL de tu imagen", consiguiendo este resultado final:
<a href="http://4.bp.blogspot.com/-NbAXL9IvBNY/VVtIxl63N5I/AAAAAAAAAWo/wdePz4A-FkI/s1600/twitter-24.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" class="blImagjtef" onmouseout="this.style.opacity=1;this.filters.alpha.opacity='100';" onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity='60';" src="http://4.bp.blogspot.com/-NbAXL9IvBNY/VVtIxl63N5I/AAAAAAAAAWo/wdePz4A-FkI/s1600/twitter-24.png" /></a>}
Este truco también lo puedes aplicar si no quieres añadir un efecto translúcido a todas las imágenes de tus posts, y solo quieres usarlo en una imagen concreta.
¡Y eso ha sido todo! Espero que os haya gustado y os resulte útil. Personalmente creo que queda genial añadir este efecto :), ¿a vosotras/os qué os parece? ¿Lo vais a poner en práctica? ¡Nos leemos en la cajita de comentarios y nos vemos este jueves con el estreno de Forgotten!
No te pierdas nada y SUSCRÍBETE AHORATAMBIÉN en Bloglovin
Atrévete descubrir Forgotten TAMBIÉN en wattpad