como hago este efecto

[deidos1]

buenas noches, quisiera saber si me podrian ayudar a hacer el efecto de facebook como en esta pagina creo q es con mouse over
http://www.recpelis.com/

[pzin]

Bienvenido al foro.

Es un efecto realmente simplón de hacer.

Un elemento con posición fija y situado a la derecha con un valor negativo que luego cambias su posición a cero controlándolo con un :hover y una transición previamente definida.

Más o menos algo así:

Código CSS:

div {
    position: fixed;
    top: 100px;
    right: -140px;
    transition: right .5s ease;
}
 
div:hover {
    right: 0;
}
 

Hice un ejemplo en jsfiddle:



Probablemente necesites poner prefijos propietarios para transition.

[deidos1]

gracias, al final use el slide likebox y jquery, igual me parecio interesante lo q hiciste, lo usare en otros proyectos

[Linton]

Pzin, ¿cómo pones aquí un Jsfiddle? Un saludo.

[pzin]

Iniciado por Linton

Pzin, ¿cómo pones aquí un Jsfiddle? Un saludo.

Con:

[jsfiddle=400;result,css,html]9V4QK[/jsfiddle]

Donde 400 es la altura, lo siguiente las pestañas a mostrar, y 9V4QK el identificador del filete (del jsfiddle vaya ).

[Linton]

¡Muchas gracias!

[Linton]

Bien, pues gracias al amigo Pzin he montado esta animación. Quería meter las pestañas móviles en un div interior, y quiero saber cómo darle la misma anchura a las tres. ¡Gracias!

[jsfiddle=400;result,css, html]HDmx4/2[/jsfiddle]

[Linton]

Bien, pues gracias al amigo Pzin he montado esta animación. Quería meter las pestañas móviles en un div interior, y quiero saber cómo darle la misma anchura a las tres. ¡Gracias!

[pzin]

Si quieres aplicarlo a varios elementos de diferentes tamaños igual convendría más usar transformaciones, en concreto translateX(). Digo tal vez. En un rato intento hacer algo a ver.

[Linton]

¡Gracias! Mientras iré estudiando ese recurso