Bildausschnitte vollständig zeigen oder Thumbnails vergrößern mit CSS

Wer auf die Highslide Effekte, die Javascript bietet, verzichten kann oder muss, wird diese Lösungen möglicherweise interessant finden.

1. Bildausschnitte beim überfahren mit der Maus vollständig zeigen

Mit CSS ist es kein Problem, seinen Besuchern die Möglichkeit zu bieten, vorhandene Bildausschnitte beim Überfahren mit der Maus, vollständig betrachten zu lassen. Hier im Beispiel ist die obere linke Ecke als Ausschnitt zu sehen und beim überfahren mit der Maus erscheint das komplette Bild.

HTML Code

Der HTML-Code dazu ist sehr simpel und sieht so aus.



 <p> 
  <a class="bildzoom_1" href="#"><span></span></a>
 </p>

Da in diesem Beispiel nur ein Bildausschnitt pro Absatz vorkommt, habe ich auf eine ungeordnete Liste <UL> verzichtet. Sollen es mehrere werden, so bietet sich der Einsatz von Listen an.

Style-Angaben für das A-Element

Um das <a>- Element eine Breite und Höhe zuweisen zu können, muss es zum Blockelement befördert werden. Die Angabe von float:left bewirkt, dass der Text das Bild umfließt.

a.bildzoom_1 { 
  display:block;
  width:120px;
  height:120px;
  background:url(deinbild.jpg) no-repeat top left ; /* Hintergrundbild links oben ausrichten und nur einmal zeigen*/
  float:left;                                       
}

Style-Angaben für das SPAN-Element

Damit das vergrößerte Bild relativ zum Bildausschnitt positioniert werden kann, ist die Angabe von position:relative notwendig. Wobei die Werte von top und left frei wählbar sind. Die Angaben von width und height entsprechen der Bildgröße und müssen immer angegeben werden.

 a.bildzoom_1 span {
  position:relative;
  top:0px;
  left:0px;
  width:570px;
  height:428px;
}

Style-Angaben für HOVER

Damit das Hintergrundbild mit der angegebenen Größe auch angezeigt wird, muss das <span>- Tag ebenfalls zum Blockelement befördert werden. Das war's.

 a.bildzoom_1:hover span {
  background:url(deinbild.jpg) no-repeat center center;  /* Hintergrundbild zentriert zeigen */
  display:block;
} 

Fazit

Da für jedes weitere Bild eine neue Klasse erstellt werden muss, können die Style-Angaben sehr schnell anwachsen. Darum sollte mit dieser Methode sehr sparsam umgegangen werden.

2. Vorschaubilder vergrößern (Zoomen)

bild Wer viele Vorschaubilder in einer Seite unterbringen und seine Style-Angaben auf ein Minimum reduzieren möchte, der sollte das <img> Tag verwenden. In diesem Beispiel wird nur ein Bild benötigt, um eine Vergrößerung zu erreichen. Allerdings sollten dann die Originalbilder eine angemessene Größe haben.

HTML-Code

Der HTML-Code ist fast derselbe wie im 1. Beispiel, nur ist hier das <span> durch das <img> Tag ersetzt worden.

 <p>
  <a href="#"><img src="deinbild.jpg" width="100" height="75" alt="alternativtext" title="titel" /></a>
 </p>

Da die Vorschaubilder von der Originalgröße abweichen, ist hier unbedingt die Breite und Höhe anzugeben. Dadurch kann der Browser den Platz für die Bilder reservieren und die Seite weiter aufbauen, während die Bilder geladen werden. Damit die Proportionen stimmen, hier mal eine Formel.


neuehoehe = (neuebreite / altebreite) * altehöhe
In diesem Beispiel ist die neue Breite = 100px und die neue Höhe = (100px / 570px) * 428px = 75px

Style-Angaben für die images Klasse und das <img> Tag

Bis auf die Angabe von background hat sich hier nicht viel geändert. Damit vermieden wird, dass sich der Text beim Hovern nicht unter das vergrößerte Bild schiebt, sollten hier die Angaben für width und height notiert werden. Wem es egal ist, einfach weg lassen.

/* höhe der bilder berechnen, damit die proportionen stimmen neuehöhe=(neuebreite / altebreite) * altehöhe */
/* height = (100px / 570px) * 428px = 75px */

a.images , a.images img   {
 margin-right:20px; /* Damit der Text nicht so am Bild klebt */
 width:100px;
 height:75px;
 display:block;
 float:left;
}

Style-Angaben zum Hovern

Diese Angaben sind, bis auf z-index, identisch der Style-Angaben für das SPAN-Element aus dem 1. Beispiel. Die Angabe von z-index:1 verhindert, dass nachfolgende Container die vergrößerten Bilder verdecken.

 
a.images:hover img  {
 position:relative;
 top:0px;
 left:0px;
 width:570px;
 height:428px;
 z-index:1;
}		 

Fazit

Wenn es um viele Vorschaubilder geht, die vergrößert dargestellt werden sollen, ist diese Methode wohl die bessere Wahl. Wer aber sehr große Bilder verwenden möchte, der sollte seine Vorschaubilder auf jeden Fall vorher skalieren und mit zwei Bildern arbeiten. Wie das geht könnt ihr hier » lesen. Wer Anregungen für eine CSS3 Galerie sucht, den könnte das hier interessieren».

erstellt am 22.02.2011

nach oben