J'ai une liste de photos et lorsque je passe la souris sur une photo, je veux que le reste des photos vire au noir et celle que je survole reste dans sa couleur d'origine. Pourriez-vous m'aider à le faire?

.inst__img {
  width: 11%;
  margin-left: 10%;
  display: inline-block;
}

.inst__img img {
  width: 100%
}
<section class="global__inst">
  <div class="inst__img">
    <img src="https://media.wired.com/photos/598e35994ab8482c0d6946e0/master/w_2560%2Cc_limit/phonepicutres-TA.jpg" alt="">
    <span>vi</span>
  </div>
  <div class="inst__img">
    <img src="https://media.wired.com/photos/598e35994ab8482c0d6946e0/master/w_2560%2Cc_limit/phonepicutres-TA.jpg" alt="">
    <span>vi</span>
  </div>
  <div class="inst__img">
    <img src="https://media.wired.com/photos/598e35994ab8482c0d6946e0/master/w_2560%2Cc_limit/phonepicutres-TA.jpg" alt="">
    <span>vi</span>
  </div>
  <div class="inst__img">
    <img src="https://media.wired.com/photos/598e35994ab8482c0d6946e0/master/w_2560%2Cc_limit/phonepicutres-TA.jpg" alt="">
    <span>vi</span>
  </div>
</section>
2
elahe 5 avril 2020 à 17:19

3 réponses

Meilleure réponse

Vous devez sélectionner les images non survolées pour les niveaux de gris: img:not(:hover)

.inst__img {
    width: 11%;
    margin-left: 10%;
    display: inline-block;
}

.inst__img img{
    width: 100%;
}
.global__inst:hover img:not(:hover) {
    filter: grayscale(1);
    -webkit-filter: grayscale(1); 
}
<section class="global__inst">
  <div class="inst__img">
    <img src="https://media.wired.com/photos/598e35994ab8482c0d6946e0/master/w_2560%2Cc_limit/phonepicutres-TA.jpg" alt="">
    <span>vi</span>
  </div>
  <div class="inst__img">
    <img src="https://media.wired.com/photos/598e35994ab8482c0d6946e0/master/w_2560%2Cc_limit/phonepicutres-TA.jpg" alt="">
    <span>vi</span>
  </div>
  <div class="inst__img">
    <img src="https://media.wired.com/photos/598e35994ab8482c0d6946e0/master/w_2560%2Cc_limit/phonepicutres-TA.jpg" alt="">
    <span>vi</span>
  </div>
  <div class="inst__img">
    <img src="https://media.wired.com/photos/598e35994ab8482c0d6946e0/master/w_2560%2Cc_limit/phonepicutres-TA.jpg" alt="">
    <span>vi</span>
  </div>
</section>
6
mplungjan 5 avril 2020 à 14:33

Veuillez essayer celui ci-dessous. paraphez toutes les images de la liste seront en noir et le survol peut afficher comme vous le souhaitez

.inst__img{
  border:2px solid red;
        background: black; opacity:.5
}

.inst__img:hover{
  border:2px solid red;
        background: white;
    opacity:1
}
0
Uwe Keim 5 avril 2020 à 14:44

Utilisez ceci:

.inst__img {
  width: 11%;
  margin-left: 10%;
  display: inline-block;
}

.inst__img img {
  width: 100%
}

.global__inst:hover .inst__img img {
  filter: grayscale(100%);
}

.inst__img:hover img {
  filter: none !important;
}
<section class="global__inst">
  <div class="inst__img">
    <img src="https://media.wired.com/photos/598e35994ab8482c0d6946e0/master/w_2560%2Cc_limit/phonepicutres-TA.jpg" alt="">
    <span>vi</span>
  </div>
  <div class="inst__img">
    <img src="https://media.wired.com/photos/598e35994ab8482c0d6946e0/master/w_2560%2Cc_limit/phonepicutres-TA.jpg" alt="">
    <span>vi</span>
  </div>
  <div class="inst__img">
    <img src="https://media.wired.com/photos/598e35994ab8482c0d6946e0/master/w_2560%2Cc_limit/phonepicutres-TA.jpg" alt="">
    <span>vi</span>
  </div>
  <div class="inst__img">
    <img src="https://media.wired.com/photos/598e35994ab8482c0d6946e0/master/w_2560%2Cc_limit/phonepicutres-TA.jpg" alt="">
    <span>vi</span>
  </div>
</section>
1
Johny 5 avril 2020 à 14:38