Hover-Effekte auf Touchscreen wie umsetzen?

Da es Hover im typischen Touch-Umfeld nicht gibt, muss der technische Aufbau geändert werden. Hier mal ein paar allgemeine Tipps zum Thema:

An vielen Stellen reicht es, wenn man einfach im CSS ergänzend noch alles korrekt für :focus eingibt.
Wenn es sich nicht um ein standardmäßig fokusierbares Element handelt, kann man das HTML-Element mit tabindex="0" noch in die normale Fokusreihenfolge aufnehmen
Ist Javascript im Einsatz, ändert man meist das hover-Event auf ein click-Event ab oder ergänzt es. Es hängt halt davon ab, um was für eine Situation es überhaupt geht.
Ggf. muss man noch per Javascript Klassen setzen. Wenn es um Fokusierung geht, stellt sich ja die Frage, was ist, wenn der Fokus weiterwandert. Im Beispiel könnte man den p-Text erscheinen (opacity 1) lassen, wenn der Fokus auf der figure-Fläche liegt. Was ist aber, wenn im Text ein Link ist und der Nutzer den Fokus darauf verschiebt? Da kommt man mit reinem CSS oft an die Grenzen und muss dann beispielsweise per JS eine Klasse setzen, die solange da bleibt, bis der Fokus sich aus dem ganzen figure (und seinen Inhalten) rausbewegt.