HTML/CSS | CÓMO CAMBIAR LA OPACIDAD DE LAS IMÁGENES

Una de mis "manías" al visitar blogs es ir pasando el ratón por cualquier parte para ver el color de los enlaces al pasar el ratón, por los iconos de redes sociales y ver si hay algún tipo de efecto. Lo mismo me pasa en las imágenes del sidebar, por ejemplo. No sé, pero creo que aplicar efectos al pasar el ratón por encima a los distintos elementos de una página hace que haya más interacción, o al menos esa es mi sensación, vaya. A mí me incita a clickar. ¿Vosotros también sois de esos?

Así que hoy voy a explicar en 3 sencillos pasos cómo aplicar el efecto de cambio de opacidad en imágenes. Lo mejor de todo es que como los iconos sociales son imágenes también sirve para ellos. Fijaos en mis iconos sociales, si pasáis el ratón sobre ellos se vuelven negros y esto es gracias al cambio de opacidad.

PASO 1

Necesitaréis la URL de la imagen o imágenes en cuestión y el link del enlace a la página que queráis que os lleve. Y añadid un nuevo gadget HTML/JAVASCRIPT.

PASO 2

Después copiad y pegad este código en el gadget, que como véis está encerrado dentro de una etiqueta div con una clase que se llamará cambio_opacidad y modificadlo con vuestros links.

<div class="cambio_opacidad"><a href="LINK-PÁGINA"><img src="URL-IMAGEN"></a></div>

NOTA: Podéis añadir tantos links con imágenes como queráis, como por ejemplo en el caso de los iconos sociales. No tiene porqué ser sólo una imagen. Pero eso si, todas las etiquetas <a> deberán estar encerradas dentro de la etiqueta <div>

EJEMPLO:
<div class="cambio_opacidad">
<a href="LINK-PÁGINA-FACEBOOK"><img src="URL-IMAGEN-FACEBOOK"></a>
<a href="LINK-PÁGINA-TWITTER"><img src="URL-IMAGEN-TWITTER"></a>
<a href="LINK-PÁGINA-INSTAGRAM"><img src="URL-IMAGEN-INSTAGRAM"></a>
<a href="LINK-PÁGINA-PINTEREST"><img src="URL-IMAGEN-PINTEREST"></a>
</div>

PASO 3

Ahora que ya tenemos el código vamos a aplicarle el estilo a la imagen con CSS. Id a PLANTILLA - PERSONALIZAR - AVANZADO - AÑADIR CSS y pegad el siguiente código, que podéis modificar a vuestro gusto en función de si queréis que la imagen sea más transparente desde un principio y después sea más opaca o al revés. ¡Y listo!

.cambio_opacidad img{
opacity:1;
filter:alpha(opacity=100);
}

.cambio_opacidad img:hover{
opacity:0.4;
filter:alpha(opacity=40);
}

NOTA: El atributo opacity y filter indican lo mismo pero para diferentes navegadores. Si queremos que nuestra imagen sea totalmente opaca deberemos cambiar el atributo así: opacity:1; y en filter:alpha(opacity=100); en cambio si queremos que disminuya su opacidad deberemos hacer decrecer el valor, por ejemplo para que se viese transparente en un 50% deberíamos poner: opacity: 0.5; y en filter: alpha(opacity=50);. Lo que quiero decir es que no podemos darle un valor a opacity por ejemplo de 0.8 y a filter de 60.

EJEMPLOS (PASA EL RATÓN POR ENCIMA DE LAS IMÁGENES)

.cambio_opacidad img{
opacity:1;
filter:alpha(opacity=100);
}

.cambio_opacidad img:hover{
opacity:0.5;
filter:alpha(opacity=50);
}
<----

.cambio_opacidad img{
opacity:0.6;
filter:alpha(opacity=60);
}

.cambio_opacidad img:hover{
opacity:1;
filter:alpha(opacity=100);
}
<----

¿Qué os ha parecido el tutorial? ¿Pensáis ponerlo en práctica? ¡Que tengáis un buen fin de semana!