Изменение цвета при наведении

Question

У меня есть список картинок, и когда я наведите курсор на картинку, я хочу, чтобы остальные картинки стали черными, а та, которую я парю, остается в своем первоначальном цвете. не могли бы вы помочь мне сделать это?

.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>

Answer 1

Вам нужно выбрать не парил изображения для оттенков серого: 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>

Answer 2

Используйте это:

.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>

Answer 3

пожалуйста, попробуйте ниже. Первоначально все изображения в списке будут черными, и наведите курсор на изображение, как вам нравится

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

.inst__img:hover{
  border:2px solid red;
        background: white;
    opacity:1
}