Jak vizuálně vypíchnout jeden z více prvků a ostatní zblednout a zakázat na ně klikat

Zdravím, Mám mikrostránku s několika produkty (zobrazené vedle sebe jako ikonky/obrázky a tlačítka pro koupi). Při kliknutí na jednu z ikonek bych potřeboval, aby se všechno ostatní kromě ikonky a tlačítka daného produktu "upozadilo" (zbledlo, zašedlo, ...) a nešlo na to kliknout. Při kliknutí jinam než na tlačítko by mělo vše přejít do původního stavu. To celé má fungovat i když při tom uživatel změní velikost okna (nebo otočí tablet/mobil). Díval jsem se, jak to řešit, našel jsem jenom případy pro modální okna - div s poloprůhlednou barvou přes celou stránku. To ale znemožní kliknutí na všechno - musel bych pak přes DOM přesouvat aktuální prvek, nastavovat pro něj top, left a position:absolute a pro návrat jej zase vracet a nad to všechno při změně šířky okna složitě všechno přepočítávat a nakonec se stresovat, že toto celé některý prohlížeč na některém zařízení nezvládne. Neexistuje elegantnější a jednodušší řešení? Napadá někoho? Díky moc

Posli nejakou ukazku, ja si to nedovedu predstavit co potrebujes.

musil.david: Nechci/nemůžu posílat screenshoty.Představ si vedle sebe čtyři ikonky, každé s tlačítkem pro koupi (plus pozadí a nějaké texty a prvky okolo).Při kliknutí na jednu z těch ikonek ta jediná spolu se svým tlačítkem zůstane stejně viditelná, vše ostatní zešediví (zbledne) a nepůjde na to kliknout.Po kliknutí jinam než na tlačítko se vše vrátí do původního stavu.Jak to udělat bez manipulace jednotlivých prvků a nastavování position:absolute, left, top? Zkoušel jsem si hrát s z-index, to se mi bohužel nechová, jak má.

Tak v jquery pomoci addClass a removeClass menit css tridy a jeste k tomu pridavat parametry tlacitkum jako readonly disabled apod. To nebude tak narocne. Na phonu to dohromady nyni nedam, ale bude to hracka.

musil.david) addClass a removeClass neovlivní, že na daný prvek půjde nebo nepůjde moci kliknout."To nebude tak narocne." - to už jsem slyšel od mnoha lidí, ale žádný to nebyl schopný dokázat.