Grafische(?) Verlinkung

[Linuchs]

Wenn du Spaß an Schnickschnack hast, hier ist eine Kompaßrose, die sich im Gehäuse dreht.

Das Bild des Kampassrahmens liegt unter der Kompassrose. Die Rose ist ein quadratisches Bild, außerhalb des Kreises transparent und hat die Klasse drehlogo:

.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);
}

<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>

Linuchs