quien sabe como hacer el siguiente efecto

[newmesis]

Hola amigos ,
hay un efecto que me gusta mucho es el de esta pagina
http://www.maestrosdelweb.com/guias/#guia-android

cuando pasas el mouse sobre la red social aparece el boton de esa red social
me gustaria implementar algo asi en mi web
quien me orienta para poder llegar a ese efecto

[3nr1c]

Necesitaras combinar CSS + Javascript:

El boton es una capa con overflow:hidden (css),
Dentro de la capa hay dos, una del tamaño de la que la contiene (por ejemplo: 50px50px) que pone el logo, y otra debajo con el boton (no se vera por la propiedad overflow),

Con JS (jQuery o similar) animas la capa de debajo.

Si tienes dudas, dilo y te paso algun enlace que te ayudará

[pedrogp9693]

No uses JavaScript.

Metes el texto y el me gusta o sigeme o lo que sea dentro de un div los 2, y uno que se vea y el otro con display:none, y al pasar por encima de el div que se oculte la imagen y salga el me gusta

Código CSS:

.social .logo{
  display:block;
}
.social .me_gusta{
  display:none;
}
.social:hover .logo{
  display:none;
}
.social:hover .me_gusta{
  display:block;
}
 

[3nr1c]

Iniciado por pedrogp9693

No uses JavaScript.

Metes el texto y el me gusta o sigeme o lo que sea dentro de un div los 2, y uno que se vea y el otro con display:none, y al pasar por encima de el div que se oculte la imagen y salga el me gusta

Código CSS:

.social .logo{
  display:block;
}
.social .me_gusta{
  display:none;
}
.social:hover .logo{
  display:none;
}
.social:hover .me_gusta{
  display:block;
}
 

Es una buena solucion, pero... te quedas sin el efecto fadeIn/Out

[pedrogp9693]

haz una transicion o una animación, como te sea más facil, te pongo un par de links que te pueden servir de ayuda (y es solo CSS)

http://xitrus.es/utilidades/Transiciones
http://xitrus.es/utilidades/Animaciones

[newmesis]

Iniciado por 3nr1c

Es una buena solucion, pero... te quedas sin el efecto fadeIn/Out

Hola gracias a los dos por responder ahora como lo tendria que hacer con javascr ya que solo se css casi nada de javascript

[3nr1c]

Con javascript (y usando jQuery) sería algo así:

Código Javascript:

$(document).ready(function(){
  $('#contenedor').mouseover(function(e){
    $('#boton').animate({top:'-100%',display:'block'},200);
    $('#logo').fadeOut(100);
  });
 
  $('#contenedor').mouseout(function(e){
    $('#boton').animate({top:'-80%',display:'none'},200);
    $('#logo').fadeIn(100);
  });
});
 

El div#boton tendría que tener este css:

Código CSS:

div#boton {
  display:none;
  position:relative;
  top:-80%;
}
 

Habría que probarlo, pero creo que va por ahí la cosa

Saludos!