Hoe wissel je tussen afbeeldingen met CSS/HTML?

Dus ik wil weten hoe je wat je op deze pagina ziet moet maken:
https://www.easygiven.com/
En dan dat: Stap 1: organiseren, Stap 2: Geld inzamelen, Stap 3: Samen geven. Dat het grijs wordt en dan kleur krijgt omstebeurten!

Toegevoegd na 1 minuut:
En kan het met alleen HTML/CSS of nog iets anders?

Weet jij het antwoord?

/2500

Dit gebeurt door middel van JavaScript. Er wordt gefade tussen een kleur- en grijsversie van de betreffende plaatjes. De makkelijkste manier voor een beginner is om jQuery te gebruiken. Daarmee heb je snel te gebruiken functies als fadeOut(). Het loopje op die site zou als volgt kunnen werken: 1: We hebben 3 slides. 2: Eentje moet kleur worden, de andere grijs. 3: Fade alle kleurversies uit. 4: Welke moet er deze keer kleur worden? Fade daarvan de kleurversie in. 5: Terug naar stap 1.

Google eens op 'jQuery slideshow'. Er zijn honderden varianten die je zo kunt downloaden.

Op je vraag: "En kan het met alleen HTML/CSS of nog iets anders?" Nee. Je kunt héél veel met CSS, maar vooral event-gestuurd, m.a.w. wanneer er een muis-/toetsenbordactie aan ten grondslag ligt. Vanwege het repeterende karakter van deze "slide show" zal dat met CSS niet gaan. WEL kun je de fading-effecten heel eenvoudig met CSS doen (via transitions). Dan hoef je in javascript alleen nog maar een hele simpele timer te hebben. Vanwege de eenvoud en de multi-platform compatibility zou dit mijn persoonlijke voorkeur hebben. Ook hoeft de bezoeker dan niet de JQuery-library te downloaden en laadt/werkt de pagina daardoor nèt iets sneller.

Stel zelf een vraag

Ben je op zoek naar het antwoord op die ene vraag die je misschien al tijden achtervolgt?

/100