a:focus verhindern auf Seitenanfang zu springen

[Kevin]

Hallo Leute,

ich arbeite mich noch in HTML und CSS ein, bin also kein Profi.

Ich gestalte zur Zeit eine Webseite und habe auf meine Startseite vier Icons gepackt, welche einen Effekt auslösen sollen, sobald man auf diese klickt. Das habe ich eigenlich gut hinbekommen, allerdings nur mit einem "a-Element". Das Problem hierbei ist, dass sobald man auf das entsprechende Icon klickt (wegen <a href="#">) die Seite immer auf den Seitenanfang scrollt.

Ich möchte einfach nur, dass beim klicken der entsprechende Text erscheint.

Hier findet ihr meinen Code: https://jsfiddle.net/8rd7usmc/4/

Wie kann ich den Code umschreiben, dass das nicht passiert?

Oder gibt es eine Möglichkeit, zu verhindern, dass beim klicken die Seite hochscrollt?

Vielen Dank vorab :)

Wünsche ein schönes Wochenende

Grüße