Bonjour je suis en train de faire un site et j'ai un problème . Je veux faire apparaitre un texte sur mon hover , il apparait sur une image mais pas sur les 4 autres alors que les codes sont identiques .

Mon code html:<

<div class="container10">

  <img src="Images/Imagedéroulement.jpg" alt="Wildcat" class="image" style="height: 300px; width: 600px">

  <div class="middle">

    <div class="text">John Doe</div>

  </div>

</div>

<div class="container11">

  <img src="Images/ImageforcesP.jpg" alt="forcesP" class="image" style="height: 300px; width: 450px">

  <div class="middle2">

    <div class="text2">Réponse</div>

  </div>

</div> >

Mon code css: <

  .container10 {

    margin: 30px 0px 30px 200px;

    float: left;

    position: relative;

}

.image {

width: 100%;

  opacity: 1;

  display: block;

  height: auto;

  transition: .5s ease;

  backface-visibility: hidden;

}

.middle {

  transition: .5s ease;

  opacity: 0;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  -ms-transform: translate(-50%, -50%);

  text-align: center;

}

.container10:hover .image {

  opacity: 0.3;

}

.container10:hover .middle {

  opacity: 0.7;

}

.text {

  background-color: grey;

  color: white;

  font-size: 16px;

  padding: 16px 32px;

}

.container11 {

    margin: 30px 200px 30px 0px;

    position: relative;

    float: right;

}

.image2 {

width: 100%;

  opacity: 1;

  display: block;

  height: auto;

  transition: .5s ease;

  backface-visibility: hidden;

}

.middle2 {

  transition: .5s ease;

  opacity: 0;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  -ms-transform: translate(-50%, -50%);

  text-align: center;

}

.container11:hover .image {

  opacity: 0.3;

}

.container11:hover .middle {

  opacity: 1;

  visibility: visible;

  z-index: 10;

  overflow: hidden;

  max-height: 10em;

}

.text2 {

  background-color: black;

  color: black;

  font-size: 16px;

  padding: 16px 32px;

} >

Merci d'avance.

-
Edité par RomainCarré1 16 janvier 2018 à 19:19:45

Salut si tu veut avoir de l'aide rend ton poste plus agréable à lire car là c'est vraiment pas le cas...

Utilise le bouton </> pour poster ton code

Salut,

Je viens de regarder ton code, tu avais fait une erreur au niveau du hover :

.container11:hover .middle {

  opacity: 1;

  visibility: visible;

  z-index: 10;

  overflow: hidden;

  max-height: 10em;

}

Le hover se fait bien sur la deuxième image mais tu cible le mauvais texte pour l'opacity, c'est le premier qui deviens opaque et non le deuxieme.

Ton code devrait être : 

.container11:hover .middle2 {

  opacity: 1;

  visibility: visible;

  z-index: 10;

  overflow: hidden;

  max-height: 10em;

}

Donc pour nettoyer un peu le code et reprendre le même que le premier :

.container11:hover .image {

  opacity: 0.3;

}

.container11:hover .middle2 {

  opacity: 0.7;

} 

A+

-
Edité par Offkors 16 janvier 2018 à 20:24:17