JQuery et animate

Bonjour à tous,

J'ai trouvé un site présentant un effet qui me plait, j'aimerais le reproduire.

L'effet est produit lors du survol des 3 gros blocs.

Sur ce site, le texte est inclus dans l'image, pour plusieurs raison j'aimerais éviter cela (sinon je ne serais pas ici ^^).

A l'heure actuelle, j'ai donc mon arrière plan qui coulisse bien vers le bas, mais je n'ai pas trouvé comment faire aussi coulisser le texte.

Voici le code actuel :

$("#books").hover(
  function () {
    $(this).animate({backgroundPosition: "(-300px 420px)"});
  }, 
  function () {
    $(this).animate({backgroundPosition: "(-300px 0)"});
  }
);

J'ai essayé en décalant tout le bloc mais celui-ci se retrouve alors en dessous mais encore visible...

Avez-vous des idées ?

Merci
Modifié par Juli3n (23 Sep 2011 - 21:16)

Je n'ai pas trouvé de solution, mais j'ai finalement trouvé un autre effet.

Je diminue l'opacité de la police c'est plus joli

Désolé pour le dérangement !

Même si tu as trouvé une autre solution, sache que pour faire des effets de masque, il faut encapsuler l'élément que tu souhaites masquer par un div comportant la classe overflow:hidden; De plus, l'élément masqué doit être en position:relative ou absolute (afin de pouvoir modifier ses propriétées left, top, right et bottom).

Il est aussi possible de modifier les valeurs de margin, mais je trouve ça moins propre et implique plus de risques de bugs d'affichage sur les différents navigateurs.