Diese Seite beeinhaltet Kode zum kopieren.
Auf einem kleinem Browser sieht das nicht gut aus,
mach doch bitte mal deinen Desktop an !

Zoom-effekt mit CSS

Video: 720p (HD) Deutsch, von Website-Bauen.de
Wie üblich, würden wir uns auf Ihr "like" bei YouTube freuen - Danke

Das HTML und CSS dazu, noch einfacher als im Video:

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:     kleine Eule grosse Eule (Beweg die Maus über 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.

Webseiten Text erstellen lassen
Volle Punkte im Page-speed erreichen

Tipps für Ihre eigene Webseite

Tipps für jeden Webmaster

Viele Tipps die jeder Webmaster beachten sollte um seinen Internetauftritt zu verbessern. Folgen Sie diesen vorteilhaften Tipps beim Erstellen Ihrer eigenen Website. Mehr lesen »

Responsive Webseiten

Webseiten die sich jeder Browser-Breite anpassen, ist für eine Webseite heute Voraussetzung. Die Zahl der Benutzer von Smartphones steigt täglich.  Mehr lesen »

Brauchen Sie “Nachhilfe”?

Wir bieten Schulung für HTML, CSS und Administration Ihrer Website an. 1zu1 Kurse über Fernhilfe, wobei wir genauestens auf Ihr Anliegen eingehen.  Mehr lesen »

Weitere Artikel für den Internetauftritt »