28172 sujets

CSS et mise en forme, CSS3

Survol DIV, Change le background sans décalage

Bonjour à tous,

Je suis nouveau sur le forum, j'ai trouvé plusieurs discussions à propos du survol de DIV mais je n'ai pas trouvé mon bonheur.

Je m'explique j'ai une image de fond en couleur et j'ai 2 éléments placés par dessus. Quand je survol un des éléments, une DIV apparaît avec le descriptif, lien et photo.

Mon blocage est que je ne trouve pas la solution pour que l'image de fond devienne en noir et blanc sans se décaler. Le premier élément étant placé tout en haut à gauche, rien ne bouge évidemment. Par contre le deuxième élément étant placé plus loin, le fond noir et blanc qui doit cacher le fond en couleur ne se place pas en haut à gauche mais à partir de l'emplacement du 2ème élément.

Je ne sais pas si cela est très clair, voici mon code :


<style>

body{
font-family: 'Droid Sans', sans-serif;
padding:0px;
margin:0px;
}

#entrepot{
width:800px;
height:600px;
background-image:url(entrepot-couleur.jpg);
background-repeat:no-repeat;
}

#cam1{
position:absolute;
width:177px;
height:258px;
}


#cam2{
position:absolute;
width:265px;
height:168px;
margin-left:535px;

}

#descriptif {
   opacity:0;   
    -webkit-transition:.5s;
    -moz-transition:.5s;
    -o-transition:.5s;
    -ms-transition:.5s;
    transition:.5s;}
 
#cam1:hover,
#cam2:hover{
background-image:url(entrepot-nb.jpg);
background-position:0px 0px;
width:800px;
height:600px;
}
 
#cam1:hover #descriptif,
#cam2:hover #descriptif{
    display:block;
	background-color:#FFFFFF;
	border:#999999 1px solid;
	border-bottom:#5a80bb 10px solid;
	padding:20px;
	width:300px;
  opacity:1;
  margin-top:10px;
}

</style>




<body>
<div id="entrepot">
    
    <div id="cam1"><span><img src="cam1.png"/></span>
      <div id="descriptif">
      <h3>Dôme PTZ HD avec infrarouge adaptatif</h3>
            <p>Modèle de la gamme professionnelle BX d’IndigoVision, le dôme PTZ HD avec infrarouge adaptatif
intégré offre des détails en Haute Définition, quelle que soit la lumière ambiante.</p>
          <a href="http://www.viadeo.com/">Plus d'infos</a>
      </div>
      
  </div>
  
  
      <div id="cam2"><span><img src="cam2.png"/></span>
      <div id="descriptif">
            <h3>Caméra tube HD</h3>
<p>Modèle de la gamme GX d’IndigoVision, la caméra tube (GX600) Haute Définition (HD) offre une
précision exceptionnelle à une résolution 2MP et est entièrement conforme à la norme ONVIF.</p>
          <a href="http://www.viadeo.com/">Plus d'infos</a>
      </div>
      
  </div>
  </div>

</body>


En vous remerciant par avance

Fabrice
Bonsoir !

En somme, vous voulez que, quel que soit le 'div#cam' survolé, le fond de l'écran passe de la couleur au noir et blanc...

Si c'est ça, ce n'est pas évident... Il est facile de cibler un élément enfant mais pas un élément parent... car c'est le style de #entrepot qu'il faudrait, a priori, changer au survol d'un div#cam...

Cela peut être fait sans trop de difficulté en Javascript. Mais en CSS, cela demande une gymnastique alambiquée qui demanderait déjà de ne pas faire comme vous faites car, dans votre code, vous positionnez les divs#cam en absolu et les enfants de ces divs seront positionnés par rapport aux divs#cam... d'où le problème que vous avez avec le second div...

A voir...
Smiley smile
Modifié par Zelena (23 May 2016 - 20:38)
Bonjour à tous,

Merci beaucoup pour vos réponses.

Ta solution est géniale SolidSnake ! Ça fonctionne automatiquement. Je ne connaissais pas le signe ~ dans les CSS.

Encore merci Smiley smile

Bonne journée
Sujet clos
Aller à