Grafische(?) Verlinkung

[Gunnar Bittersmann]

@@Linuchs

.drehlogo {
  -webkit-transition: -webkit-transform 3s ease;
  -moz-transition: -moz-transform 3s ease;
  -ms-transition: -ms-transform 3s ease;
  -o-transition: -o-transform 3s ease;
  transition: transform 3s ease;
}
.drehlogo:hover {
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  transform: rotate(360deg);
}

Keine der Vendor-Präfix-Eigenschaften macht Sinn. Wenn einige davon je sinnvoll waren, ist das lange her. Da solltest du mal ausmisten.

<div style="position:relative;width:7em;height:7em;float:left;margin-right:.5em;">
  <img src="img_themen/kompassrahmen.png" alt="kompassrahmen" style="width:100%;height:100%" />
  <div style="position:absolute;left:10%;width:80%;top:10%;height:80%;">
    <img class="drehlogo" src="img_themen/kompassrose_dreh.png" alt="kompassrose" style="width:100%;height:100%;" />
  </div>
  <div style="position:absolute;left:50%;width:.1pt;top:10%;height:40%;border-left:.1pt solid #0f0;"></div>
</div>

Die Alternativtexte machen auch keinen Sinn. Von „Kompassrahmen Kompassrose“ hat ein Screenreader-Nutzer nichts. Wenn, dann sollte eins der img den Alternativtext „Kompass“ haben; das andere keinen, d.h. alt="". Hier handelt es sich aber um eine Verzierung, also keine Alternativtexte.

Die divs müssen auch nicht sein. Als Container für die beiden Grafiken bietet sich svg an, dann bekommt man das auch responsiv hin. ☞ Codepen

Die Zeit für den Effekt ist bei dir zu lange. Val Head rät: Wenn man denkt, es sei gut, die Zeit nochmal durch 2 teilen. In deinem Fall sogar durch 3.

Anmerkungen:

• aria-hidden="true" versteckt die Verzierung vor Screenreadern
• clip-path: circle() sorgt dafür, dass der Hover-Effekt nur bei der kreisförmigen Kompass-Fläche eintritt, nicht beim umgebenden Quadrat
• @media not (prefers-reduced-motion) sorgt dafür, dass der Effekt nicht bei Nutzern eintritt, die mit Bewegungen auf Webseiten nicht klarkommen.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!