Efecto hover transparente con CSS
0Al 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:
CSS:
- 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):