Efecto hover transparente con CSS

Al maquetar el diseño nuevo para el blog me surgió una idea y era hacer los iconos sociales transparentes con CSS y en el hover que dejasen de serlo.

Esto lo he logrado gracias a la fuente de esta entrada (ver al final) y un poco de adaptación.

El código es el siguiente:

a {
	z-index:1;
	filter:alpha(opacity=70);
	-moz-opacity:.70;
	opacity:.70;
}
a:hover {
	opacity: 100;
}

Con esto le decimos al navegador que el enlace por defecto esté con una transparencia del 70% y en el efecto hover sea del 100%.

El ejemplo no lo tengo en código (al menos no está subido al servidor), pero podeis verlo en imagen (que también sirve):

¡MANTENME INFORMADO!

¡Gracias por tu interés en estar informado del próximo lanzamiento de mis cursos! 😎

¡No hago spam! Lee la política de privacidad para tener más información.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

*

DARÍO BALBONTÍN FERNÁNDEZ es el Responsable del tratamiento de los datos personales del usuario y le informa que estos datos serán tratados de conformidad con lo dispuesto en el Reglamento (UE) 2016/679 de 27 de abril (GDPR) y la Ley Orgánica 3/2018 de 5 de diciembre (LOPDGDD), por lo que se le facilita la siguiente información del tratamiento: Fin del tratamiento: mantener una relación comercial y el envío de comunicaciones sobre nuestros productos y servicios. Criterios de conservación de los datos: se conservarán mientras exista un interés mutuo para mantener el fin del tratamiento y cuando ya no sea necesario para tal fin, se suprimirán con medidas de seguridad adecuadas para garantizar la seudonimización de los datos o la destrucción total de los mismos.Comunicación de los datos: No se comunicarán los datos a terceros, salvo obligación legal. Derechos que asisten al usuario: Derecho a retirar el consentimiento en cualquier momento. Derecho de acceso, rectificación, portabilidad y supresión de sus datos y a la limitación u oposición al su tratamiento. Derecho a presentar una reclamación ante la Autoridad de control (agpd.es) si considera que el tratamiento no se ajusta a la normativa vigente. Datos de contacto para ejercer sus derechos: contacto@dariobf.com.