Different background sur hover item menu

Bonjour,

Je cherche à réaliser un menu dont chaque sous item de sous menu ferait changer l'image de fond du site en plein écran.

Pour se faire une idée, le site de DIOR est un bon exemple
http://www.dior.com/home/fr_fr

J'avoue avoir trouvé quelques pistes (avec transitions) avec

  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;

Mais rien de concret
Des idées ?

Merci par avance
walter

Salut,

Le site de Dior n'a pas l'air de correspondre à ce que tu dis...

En faite la le site de Dior à l'air de diviser ta fenêtre horizontalement en une timeline et joue la séquence en fonction de la position de ta souris.

Donc tu cherches à faire quel effet ?

C'est du javascript derrière qui gère l'animation en 20 images par zone selon la position du curseur dans l'axe des X, la transition CSS ne s'applique pas aux images..
Modifié par dqniel (09 Jul 2013 - 15:10)

Merci pour ces premières réponses.
POur répondre à Yordi... je veux que chaque fois que l'pn passe le curseur sur un élement du menu et sous menu, l'image BG fullscreen change... avec ou sans effet là n'est pas la véritable enjeu.

J'espère être clair.
Chaque terminologie de menu ou sous menu se voit ainsi illustrer en "temps réel"

merci

Le css ne permet pas de provoquer un changement d'un élément parent a partir du survol d'un enfant, c'est toujours survol parent = modif enfant.
Il faudra partir sur du js, par exemple :
http://api.jquery.com/mouseover/

$('.menu').first().mouseover(function() {
   $('html').css('background','url("img.jpg")';
});

Modifié par dqniel (09 Jul 2013 - 15:51)