@@mark:

nuqneH

Auf der von dir verlinkten Seite wird dieser Effekt erreicht, indem der Opacity-Wert im style-Attribut des img-Tags per Javascript auf 0.5 gesetzt wird.

Und das auch noch stufenweise in einer Schleife. Also so, wie man es NICHT machen sollte. https://forum.selfhtml.org/?t=218225&m=1501921 ff.

Mir persönlich gefällt diese Umsetzung jedoch nicht, da sowohl style-Attribut, als auch die CSS-Klasse des img-Tags verändert werden. Das wäre m.M. nicht nötig gewesen.

Es gibt keine „CSS-Klassen“. Und du meinst das „img-Element“.

Ich würde auch nicht bei jeder Auswahl allen Item eine Klasse "active" bzw. "inactive" verpassen, sondern im HTML festlegen, zu welchen Kategorien (Klassen) das jeweilige Item gehört, bspw. <li class="category-1 category-2">1 2</li>.

Ich hab da mal was vorbereitet.

Die UI-Elemente zur Auswahl sind Checkboxen (wenn nur eine Kategie ausgewählt werden soll: Radiobutton) mit Labels. Die Checkboxen (bzw. Radiobuttons) können mit CSS vesteckt werden; dann ist dafür zu sorgen, dass deren Status über das Label visualisiert wird, bspw. :checked + label { background: silver }.

Bei Änderungen der Auswahl wird dem Containerelement eine dieser Kategie entsprechende Klasse hinzugefügt bzw. weggenommen:

controls[i].addEventListener('change', function ()  
{  
	items.classList.toggle(this.id);  
}, false);

Alle nicht zu den jeweilig ausgewählten Kategorien gehörenden Items werden transparent dargestellt:

.select-1 :not(.category-1),  
.select-2 :not(.category-2),  
.select-3 :not(.category-3)  
{  
	opacity: 0.2;  
}

Und wichtig: Der Fade-Effekt ist reines CSS: #items li { transition: opacity 1s ease }

Qapla'