html - para - mostrar texto hover css

¿Cómo puedo hacer un efecto de desplazamiento para mis íconos sociales en css?

Question

Quiero crear un simple efecto de desplazamiento, tengo una imagen gris de facebook, twitter e youtube y cuando se mueve sobre mi mouse, quiero obtener el color original de las redes sociales, eso es todo lo que quiero.

Este es mi html

            <div class="social-top">

                <ul>
                    <li><a href=""><img src="images/social/fb.png"></a></li>
                    <li><a href=""><img src="images/social/twitter.png"></a></li>
                    <li><a href=""><img src="images/social/yt.png"></a></li>
                </ul>

            </div>

Este es mi css.

.social-top {
    width: 150px;
    padding-left: 650px;
}

.social-top li {

    display: inline-block;
    width: 40px;
}

.social-top a {
    display: block;
    overflow: hidden;
    height: 30px;
    position: absolute;
}

.social-top a:hover {
    top: 30px;
}

Y aquí hay un sitio web que tiene el efecto que quiero:

http://lalomacd.com.mx/2013/

Saludos.

Answer 1

Así es como lo haces. Puede colocar un PNG transparente aquí para sus enlaces, en lugar del texto, si lo desea. O puede consultar algunas bibliotecas de iconos de fuentes que usan texto para crear un ícono de redes sociales para usted. Por ejemplo, echa un vistazo a Fontello. http://fontello.com/

Aquí está el código que escribí para su efecto:

    <div class="social-top">

    <ul>
        <li class="facebook"><a href="#self">F</a></li>
            <li class="twitter"><a href="#self">T</a></li>
                <li class="youtube"><a href="#self">YT</a></li>
    </ul>

</div>



.social-top {
   float: right;
 }

.social-top li {

display: inline-block;
width: 40px;
height: 40px;
background-color: #ccc;
border-radius: 150px;
}

.social-top li.facebook:hover {
background-color: #006;

}

.social-top li.twitter:hover {
   background-color: #060;

}

 .social-top li.youtube:hover {
  background-color: #600;

 }

.social-top li:hover a {
       color: #fff;
}

.social-top a {
 display: block;
   line-height: 40px;
   text-align: center;
   width: 100%;
  height: 100%;
 }

Aquí está el enlace a JS Fiddle: http://jsfiddle.net/eNU8H/

Answer 2

De acuerdo con el sitio que suministró, hicieron una imagen con las 2 imágenes deseadas.

Y en el vuelo estacionario solo cambian la posición de fondo.

Ejemplo:

.srss{
         background-image:url(images/rss-icon.png);
         background-position:bottom;
 }

 .srss:hover{
    background-position:top;
 }

Con un HTML según esto:

Usando una imagen como esta

  <a href="http://lalomacd.com.mx/2013/feed/" target="blank"><img class="srss" src="http://lalomacd.com.mx/2013/wp-content/themes/laloma-theme-second/images/blank.png" alt=""></a>

Todo esto lo puede obtener directamente del sitio viendo la fuente y el css

Por supuesto, esta no es la única manera, puede cambiar la imagen de fondo en lugar de la posición de fondo, pero todo eso depende de la manera que más le guste.

Answer 3

Solo están usando sprites de imagen. Establezca la imagen de fondo en la ruta al sprite. En la vista normal, configure la posición de fondo para ver el icono oscuro. En el estado de desplazamiento, cambie la posición de fondo a la parte del objeto con el icono de color.

Answer 4

También es posible que desee verificar http://perfecticons.com . Hay algunos efectos de vuelo estacionario allí.

Answer 5

en lugar de usar etiquetas img crea etiquetas div y establece su imagen de fondo en los íconos sociales y al colocarlos sobre ellos, cámbialos