Меню изображения - выделение текущей страницы

Question

Я хочу, чтобы меню на нашем сайте четко показывало, на какой странице вы находитесь. Меню состоит из 6 картинок, яркость которых я позволю увеличить при наведении мыши. Я также делаю картинки меньше для мобильных телефонов, в зависимости от ширины экрана.

Мне бы хотелось, чтобы 5 других картинок в меню были черно-белыми или менее насыщенными, чем текущая страница, на которой вы находитесь.

Возможно ли это? Я видел сообщение с использованием функции списка для текстовых меню, но мне не удалось заставить его работать.

Изображение меню FYI

Код, который я использую, выглядит следующим образом:

@media (max-width:629px) {
  img#optionalstuff {
    display: none;
  }
}
@media (min-width:630px) {
  img#mobilestuff {
    display: none;
  }
}

<style>
 .image5 {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
} 
    
.image5:hover {
-webkit-filter: brightness(1.17);

}

</style>

<div class="uk-grid-column-small uk-grid-column-collapse uk-child-width-1-6@m uk-child-width-1-3@s uk-text-center" uk-grid>
    <div>
        <div ><a href="https://webercooling.com/nl/vacuum-koeler-voor-brood-bakkerij"><img class="image5" id="optionalstuff" src="https://iili.io/HgqonS.png" alt="Brood & Bakkerij vacuum cooling" height="652" width="668"></a></div>
		<div ><a href="https://webercooling.com/nl/vacuum-koeler-voor-brood-bakkerij"><img class="image5" id="mobilestuff" src="https://webercooling.com/images/Carrouselmenu/NL/mob_broodbakkerij.png" alt="Brood & Bakkerij vacuum cooling" height="652" width="668"></a></div>
    </div>
    <div>
        <div><a href="https://webercooling.com/nl/industriele-koeltechniek-voor-de-professionele-keuken"><img class="image5" id="optionalstuff" img src="https://iili.io/HUmKyF.png" alt="Koeltechniek voor de keuken" height="652" width="668"></a></div>
		<div><a href="https://webercooling.com/nl/industriele-koeltechniek-voor-de-professionele-keuken"><img class="image5" id="mobilestuff" img src="https://webercooling.com/images/Carrouselmenu/NL/mob_voedselkeuken.png" alt="Koeltechniek voor de keuken" height="652" width="668"></a></div>
	</div>
    <div>
        <div><a href="https://webercooling.com/nl/vacuum-koeler-voor-sushi-rijst"><img class="image5" id="optionalstuff" img src="https://iili.io/HUmFv1.png" alt="Vacuum cooler voor rijst" height="652" width="668"></a></div>
		<div><a href="https://webercooling.com/nl/vacuum-koeler-voor-sushi-rijst"><img class="image5" id="mobilestuff" img src="https://webercooling.com/images/Carrouselmenu/NL/mob_sushirijst.png" alt="Vacuum cooler voor rijst" height="652" width="668"></a></div>
	</div>
    <div>
        <div><a href="https://webercooling.com/nl/vacuum-koeler-voor-groenten-en-kruiden"><img class="image5" id="optionalstuff" img src="https://iili.io/Hg93a2.png" alt="Groenten en kruiden vacuum cooling" height="652" width="668"></a></div>
		<div><a href="https://webercooling.com/nl/vacuum-koeler-voor-groenten-en-kruiden"><img class="image5" id="mobilestuff" img src="https://webercooling.com/images/Carrouselmenu/NL/mob_groentenkruiden.png" alt="Groenten en kruiden vacuum cooling" height="652" width="668"></a></div>    
	</div>
    <div>
        <div><a href="https://webercooling.com/nl/cold-chain-management-voor-bloemen"><img class="image5" id="optionalstuff" img src="https://iili.io/Hg9J44.png" alt="Bloemen en koudeketen" height="652" width="668"></a></div>
		<div><a href="https://webercooling.com/nl/cold-chain-management-voor-bloemen"><img class="image5" id="mobilestuff" img src="https://webercooling.com/images/Carrouselmenu/NL/mob_bloemenkoudeketen.png" alt="Bloemen en koudeketen" height="652" width="668"></a></div>
	</div>
    <div>
        <div><a href="https://webercooling.com/nl/vacuum-koeler-voor-turf-compost"><img class="image5" id="optionalstuff" img src="https://iili.io/HgdDlf.png" alt="Turf en compost koeling" height="652" width="668"></a></div>
		<div><a href="https://webercooling.com/nl/vacuum-koeler-voor-turf-compost"><img class="image5" id="mobilestuff" img src="https://webercooling.com/images/Carrouselmenu/NL/mob_grascompost.png" alt="Turf en compost koeling" height="652" width="668"></a></div>
	</div>
</div>

Заранее благодарю за помощь!

С уважением, Джои

Answer 1

`a img {-webkit-фильтр: яркость (50%)}

a: активный img, a: посещенный img {-webkit-фильтр: яркость (1); } `