En la mayoría de los sitios web que visitamos a diario, a la hora de compartir algo que nos ha gustado en las redes sociales, veremos el mismo grupo de íconos dispuestos de una manera repetitiva y monótona. Si queremos que los íconos de nuestro sitio web se destaquen, podemos utilizar este sencillo e impactante efecto para lograrlo.

Haz clic en este enlace para ver una demostración del efecto >>

Este truco funciona con todos los navegadores que utilizan webkit y en Firefox 4.  Tambien puedes ver la versión jQuery del efecto, en el caso de que necesites respaldar la compatibilidad (notarás que visualmente, los resultados son idénticos).

Lo primero es definir su estructura HTML, de la siguiente manera:

    <ul class="social">
       <li class="delicious">
          <a href="http://www.delicious.com/">
             <strong>Delicious</strong>
          </a>
       </li>
       <li class="digg">
          <a href="http://digg.com/">
             <strong>Digg</strong>
          </a>
       </li>
       <!-- Más servicios -->
    </ul>

Como puedes ver, usaremos una lista no ordenada con items que contendran los enlaces. Habrás notado el uso del tag <strong>. Esto nos servirá más adelante…

Pasemos al CSS, empezando por el estilo básico:

    .social { list-style:none; }
    .social li { display:inline; float:left; }
    .social li a { display:block; width:48px; height:48px; position:relative; }
    .social li a strong { position:absolute; left:20px; top:-1px;
       text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7);
       border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    }

    li.delicious { background-image:url("../images/delicious.png"); }
    li.digg { background-image:url("../images/digg.png"); }

Y a continuación, crearemos nuestra animación utilizando puro CSS3:

    .social:hover li { opacity:0.2; }

    .social li { transition-property: opacity; transition-duration: 500ms; }
    .social li a strong { opacity:0;
     transition-property: opacity, top; transition-duration: 300ms;
    }

    .social li:hover { opacity:1; }
    .social li:hover a strong { opacity:1; top:-10px; }

 

Haremos objetivo una propiedad que deba ser incluida en la animación, en este caso la opacidad. Tambien configuramos la duración de la animación.

Ahora, en su estado hover, haremos que estas propiedades vean cambiados sus valores. Ya que transition-property ha sido configurado, ¡El navegador hará la animación por nosotros! Cuando sale del estado hover, las clases son revertidas, con su respectiva animación.

Y eso es todo. En el caso de que te encuentres con problemas de compatibilidad, puedes utilizar el siguiente código jQuery para realizar el mismo efecto:

    $("#jquery li").each(function() {
       $("a strong", this).css("opacity", "0");
    });

    $("#jquery li").hover(function() { // Mouse over
       $(this)
          .stop().fadeTo(500, 1)
          .siblings().stop().fadeTo(500, 0.2);

       $("a strong", this)
          .stop()
          .animate({
             opacity: 1,
             top: "-10px"
          }, 300);

    }, function() { // Mouse out
       $(this)
          .stop().fadeTo(500, 1)
          .siblings().stop().fadeTo(500, 1);

       $("a strong", this)
          .stop()
          .animate({
             opacity: 0,
             top: "-1px"
          }, 300);
    });

¡Esperamos que te sea de utilidad!

Haz clic en este enlace para ver una demostración del efecto >>