Zoom-effekt mit CSS

Im HTML gebrauchen wir das selbe Bild 2 mal - mit unterschiedlichen klassen
Hier im Beispiel als "klein" = das thumbnail, und als "gross" = das eigentliche Bild benannt
Wir laden das Bild der vollen Größe (gross) auf den Server (hier ist es 240px bei 240px) und verkleineren es mit der klasse "klein". Beim hovern über das kleine sprechen wir durch das CSS an, das Bild dann in voller größe zu zeigen.
Optional fügen wir noch den animierten Effekt hinzu, eine Zeitverzögerung des Vorgangs.

Live Beispiel:     Schiebe deinen Mauszeiger auf das kleine Bild

Code für das HTML:
Kopier die code direkt aus dem Fenster unten. Kommentare sind in grün geschrieben

<img class="klein" src="img/eule.jpg" alt="kleine Eule" /> <!-- wird dargestellt als thumbnail -->
<img class="gross" src="img/eule.jpg" alt="grosse Eule" /> <!-- wird dargestellt als grosses Bild -->

Code für das CSS:
Kopier die code direkt aus dem Fenster unten. Kommentare sind in braun geschrieben

<style type="text/css">
  img {margin: 8px;} /* betrifft alle images, Abstand zwischen klein und gross wird 2 mal 8px */
  .klein {width: 60px;height: 60px;}
  .gross {
      position: absolute;
      width: 0px;
      -ms-transition: width 0.4s linear 0s; /* alte Internet-Explorer können das nicht */
      -webkit-transition: width 0.4s linear 0s;
      transition: width 0.4s linear 0s; z-index: 1; /* z-index muss größer als andere z-index sein */
  }
.klein:hover + .gross { width:240px;}
</style>

Ähnliches Thema: Wir können auch den link verschleiern damit man ihn nicht kopieren kann.