28.05.2010
Bilder und Fotos mit Vergrößerungseffekt
Oft ist es interessant, wenn man beim Hovern über ein Bild ("mit der Maus drüberfahren") dieses vergrößert darstellen kann. Damit lassen sich kleinere Grafiken z.B. problemlos in einen Text einbinden und dem Besucher wird dennoch ermöglicht, ein solches Foto vergrößert anzusehen.
Zu diesem Zweck macht ihr euch am besten zwei Kopien von einem Originalfoto. Für die Darstellung im Web reicht eine Auflösung von 72px/Zoll. Ich verwende hierzu folgendes Foto von meiner Handball-Fotoseite in zwei unterschiedlichen Größen:
Dateibezeichnung: "bild_klein.jpg" (im Beispiel 250px x 167px groß)
Dateibezeichnung: "bild_gross.jpg" (im Beispiel 500px x 333px groß)
Auch wenn wir in diesem Fall nur ein Foto darstellen wollen, verwenden ("missbrauchen") wir trotzdem eine ul-Liste. Wir bewirken damit, dass das vergrößerte Hover-Bild unseren Wünschen entsprechend positioniert werden kann. Zwecks eindeutiger Abgrenzung zu gleichartigen Elementen verwenden wir eine Klasse ".foto". Diese kann im Gegensatz zu einem ID mehrmals je Seite eingesetzt werden. Im HTML-Quelltext wird dieses Foto nun an gewünschter Stelle wie folgt eingebunden:
<ul class="foto">
<li>
<a href="#">
<img src="bild_klein.jpg" alt="kleines Bild">
<img src="bild_gross.jpg" alt="großes Bild" class="gross">
</a>
</li>
</ul>
Dass wir für die Darstellung einen Link verwenden hat den Zweck, dass beim Hovern das Bild vergrößert wird. Da jedoch keine echte Verlinkung zu einer anderen Seite stattfindet, dient die "Raute" "#" lediglich als Platzhalter.
Danach wird zunächst das kleine Foto und dann das große Foto ganz normal als Image eingebunden.
Mit der zugewiesenen class="gross" bewirken wir per CSS die vergrößerte Darstellung.
Zunächst werden folgende allgemeine CSS-Angaben hinterlegt:
.foto
{
margin: 0;
padding: 0;
}
.foto img
{
border: none;
}
.foto li
{
list-style: none;
position: relative;
}
Mit den margin- und padding-Angaben bei .foto wird bewirkt, dass die Liste keine unerwünschten Abstände verursacht.
Um eine standardmäßig blaue Bildumrandung zu vermeiden, definieren wir bei .foto img, dass kein Rahmen erscheinen soll. Ihr könnt aber hier ebenso einen Rahmen in gewünschter Farbe und Stärke hinterlegen.
Schließlich sorgen wir bei .foto li noch dafür, dass keine Listen-Aufzählungspunkte erscheinen. Die relative Positionierung dient dazu, später das Hover-Bild zu positionieren.
Nun sorgen wir mit einer weiteren Klasse .gross zunächst dafür, dass das größere Bild im normalen Linkzustand verborgen bleibt. Das erreichen wir mit
a .gross
{
display: none;
}
Mit den folgenden Angaben lassen wir nun beim Hovern das vergrößerte Foto erscheinen und positionieren es absolut an der linken oberen Ecke des kleinen Fotos:
a:hover .gross
{
display: block;
position: absolute;
top: 0;
left: 0;
}
Damit ist unser CSS-Vergrößerungseffekt fertig.
Falls alles richtig gemacht wurde, dann sollte beim Hovern über das kleine Foto nun die vergrößerte Version erscheinen:
Da wir eine ul-Liste verwendet haben, erfolgt die Darstellung als Blockelement. Wer das Bild gerne links oder rechts mit Text umgeben möchte, hinterlegt für ul noch eine zusätzliche float-Angabe, z.B.
<ul class="foto" style="float: left;">