<p>Der Link im Beispiel unten (rot umrandet) wurde absolut positioniert. Hier ist als <code>href</code> nur "#" angegeben, dadurch wird beim Draufklicken die Seite neu geladen. Anstelle des #-Zeichens wird einfach wie bei jedem anderen Link das gewünschte Ziel eingefügt.</p>
<hr/>
<div class="container">
      <a href="#" class="clickable"></a>
      <img src="https://i.postimg.cc/KjtjnrjR/memory-bg2.jpg)" alt="demoimage">
    </div>
<hr/>
<p>Ihr könnt zur Übung im CSS z.B. die Position verändern und somit scheinbar ein anderes Bildchen klickbar machen, oder weitere Links hinzufügen.</p>
p{
  font-family: Calibri, sans-serif;
  font-size: 20px;
}
.container{
        position: relative;
      }
      .container>img{
        display: block;
      }
      .clickable{
        position: absolute;
        border: 2px solid red;
        top: 5px;
        left: 15px;
        width: 90px;
        height: 85px;
      }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.