Efecto de opacidad

Bienvenidos a un nuevo tutorial, hoy aprenderemos a aplicar un efecto muy sencillo, el cual se denomina "Efecto de opacidad"
Veamos un ejemplo para saber de que se trata:



¿Cúal es el efecto y cómo lograrlo?, uno muy simple y sencillo, al apoyar el mouse la imagen cambia de color, para lograrlo usamos la combinación de los eventos onmouseover y onmouseout.
1)Lo primero que vamos a necesitar serán dos imágenes, una será para el estado activo y la otra que será para el estado inactivo/descanso.



En mi caso particular, lo que hago es tomar una imagen en su estado natural, y quitarle la "Saturación" de la misma.
Para eso abrimos la imagen con el Photoshop => Imagen => Ajustes => Tono y saturación [Control+U]



2)Ahora, lo que haremos será quitar la "Saturación" de la imagen.
Para eso deslizamos la barra hacia la izquierda (-100), de esta forma, la imagen tomará tonalidades de matices grises.
Luego hacemos un clic en "OK", y guardamos la imagen con el nombre que deseamos.



3)Nuestro siguiente paso será abrir el index.php de nuestra web (o en el archivo en el que desean agregar la imagen) y pegar el siguiente código:

<a href="https://muonlinetutoriales.com"><img src="Imagen1.jpg" onmouseover="this.src='Imagen2.jpg';" onmouseout="this.src='Imagen3.jpg';"/></a>

a) Imagen1.jpg: En imagen1.jpg agregaremos el link de la imagen que queremos que se muestre sin apoyar el mouse.
b) Imagen2.jpg: En imagen2.jpg agregamos el link de la imagen que queremos que se muestre cuando apoyamos el mouse sobre ella.
c) Imagen3.jpg: En imagen3.jpg agregamos el link de la imagen que queremos que se muestre cuando soltamos o quitamos el mouse sobre dicha imagen (Para generar el efecto inicial, aqui colocamos el mismo link que el de la imagen1.jpg)

4)Cargando las diferentes imágenes, nuestro trabajo quedaría similar al siguiente:

Para modificar el enlace lo hacemos directamente desde el código en la linea siguiente: "<a href="aqui_la_url...", si no quieren que la imagen genera un enlace, quitamos del código "<a href="aqui_la_url..." y el "</a>" final

Cabe mencionar que existen muchísimas formas de lograr efectos similares, por ejemplo con .css, con librerias Javascript, etc...
En próximos tutoriales veremos un ejemplo de como emplearlos.

Espero que les sirva.
Recuerden que si tienen alguna duda pueden dejar su comentario o escribirnos a través de nuestros canales de comunicación.
Será hasta el próximo tutorial asd*

Con tu donación ayudas a mantener el sitio activo