Op het moderne web zijn er talloze technieken die kunnen worden gebruikt om interessante interacties te creëren, maar de eenvoudigste en meest elegante is meestal CSS, en met name de toevoegingen die met CSS3 werden geleverd.
Vroeger moesten we voor dit soort effecten op JavaScript vertrouwen, maar dankzij de steeds groter wordende ondersteuning voor CSS3 via verschillende browsers, is het nu mogelijk om dergelijke effecten helemaal zonder scripting in te stellen. Er zijn helaas nog steeds browsers (IE9 en lager) die CSS3 niet ondersteunen, dus je hebt een terugval nodig voor oudere browsers of om het effect te behandelen als een progressieve verbetering.
Vandaag gaan we bekijken hoe we koele, maar nette hover-effecten kunnen toepassen om bijschriften van afbeeldingen te tonen en te verbergen.
Als u de code wilt volgen, kunt u dit doen download de bestanden hier.
De eerste demo is onze eenvoudigste: het beeld zal naar rechts vliegen om het bijschrift te onthullen.