CSS/Anwendung und Praxis/Bilder mit Bildunterschriften

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

In diesem Tutorial lernen Sie, wie Sie Bilder und ihre Bildunterschriften ansprechend präsentieren. Dabei wird vor allem das figure-Element als Container für Bilder und dazugehörendem Text verwendet.

Bildunterschriften mit figcaption[Bearbeiten]

Um Bildern eine passende Erklärung oder Bildunterschrift zu geben ist das figcaption-Element ideal. Es ist vor allem aus Gründen der Semantik den leider immer noch häufig anzutreffenden Lösungen mit verschachtelten div-Elementen vorzuziehen.

Beispiel: Präsentieren eines Bildes mit figure und figcaption ansehen …
<figure>
	<img src="lauf-1.jpg" alt="Lauf an der Pegnitz - Nürnberger Tor">
	<figcaption>Lauf an der Pegnitz - Nürnberger Tor</figcaption>
</figure>

Nur mit dem default-CSS der Browser, sieht das Ergebnis zunächst einmal wenig ansprechend aus. Deshalb setzen wir unsere Vorstellungen mit ein wenig CSS um:

Beispiel: CSS für figure und figcaption ansehen …
figure {
  position: relative;
  margin: 0;
  padding: 10px;
  width: 470px;
  border: 1px solid gainsboro;
  background: white;
}

figcaption {
  padding: 10px;
  text-align: center;
}

Hier werden einige Einstellungen festgelegt, die erst später wichtig werden:

Der Normalfall: mehrere Bilder nebeneinander[Bearbeiten]

Während in Fließtexten oft ein einzelnes Bild integriert ist, will man häufig mehrere Bilder nebeneinander präsentieren. Das figure-Element kann auch verschachtelt werden:

Beispiel: Präsentieren mehrerer Bilder mit verschachtelten figure-Elementen ansehen …
<figure class="gesamt">
      <figure class="einzel">
           <img src="lauf-1.jpg" alt="Nürnberger Tor" />
           <figcaption>Nürnberger Tor</figcaption>
      </figure>
      <figure class="einzel">
           <img src="lauf-2.jpg" alt="Pegnitz" />
           <figcaption>Brücke über die Pegnitz</figcaption>
      </figure>      
      <figure class="einzel">
           <img src="lauf-3.jpg" alt="Nürnberger Tor" />
           <figcaption>Mauermühle und Judenturm</figcaption>
      </figure>
      <figcaption class"gesamt">Ansichten von Lauf an der Pegnitz</figcaption>
   </figure>
Beispiel: CSS-Einstellungen
figure{
  margin: 0;
}

figure.einzel {
  display: inline-block;
  padding: 10px;
  width: 33%;
  border: 1px solid gainsboro;
}

Um im CSS ein figure figure zu vermeiden, geben wir den Kindelementen eine Klasse mit Namen einzel.

Folgende Einstellungen sind wichtig:

  • display: inline-block: ordnet die Einzelansichten nebeneinander an
  • width: 33%;: legt die Breite auf ein Drittel des body-Elements fest (da das Eltern-Element figure keine festgelegte Breite hat.)


Anpassung an andere Viewports (Responsive Webdesign)[Bearbeiten]

Das obige Beispiel sieht auf breiten Viewports gut aus, jetzt brauchen wir aber noch einige Anpassungen für mobile Geräte mit kleineren Bildschirmen:

Beispiel: CSS-Einstellungen für responsives Verhalten ansehen …
body {
  max-width: 90em;
}

figure img {
  width: 100%;
}
	  
@media only screen and (max-width:800px) {
  body{
    width: 100%;
    margin: 2% 0;
    padding: 1%;
  }
  figure.einzel {
    width: 48%;
  }
}   

@media only screen and (max-width:600px) {
  figure.einzel {
    width: 96%;
  }
}

Folgende Einstellungen sind wichtig:

  • max-width:90em;: Der body nimmt auf großen Monitoren eine maximale Größe von 90em ein, bei kleineren Viewports wird er entsprechend schmaler.
  • figure img {width:100%;}: damit die Bilder in einem schmaleren figure nicht überstehen, skalieren sie sich an die verfügbare Größe.
  • @media only screen and (max-width:800px): Wird der Bildschirm schmaler als 800px werden nur noch 2 Bilder nebeneinander angezeigt, bei weniger als 600px nur noch eins.
    Die Werte von 48%, bzw 96% ergeben sich aus den 100% Breite des body, von denen das padding von 1% (links und rechts) abgezogen wird.

Einschwebende Bildunterschriften[Bearbeiten]

Ein transparenter Balken am unteren Bildrand[Bearbeiten]

Normalerweise ist figcaption unterhalb des img im figure-Elternelement positioniert. Wir wollen es jetzt über den unteren Bildrand positionieren. Damit das Bild noch erkennbar bleibt, soll die Bildunterschrift einen durchscheinenden Hintergrund bekommen:

Beispiel: absolute Positionierung der Bildunterschrift ansehen …
figure{
  position: relative;
}

figure img {
  display: block;
}

figcaption {
  position: absolute;
  bottom: 0;
  ...
  width: 100%;
  background: black;
  color: white;
  opacity: 0.5;
}

Zuerst müssen wir
a. figure relativ und
b. figcaption absolut positionieren.

Danach wird figcaption mit bottom:0; unten platziert.

Beachten Sie: Damit bottom:0; auch wirklich mit dem figure, bzw. img-element unten bündig abschließt, muss ebenfalls img {display:block;} festgelegt werden!

Folgende Einstellungen sind noch wichtig:

  • width: 100%;: sorgt dafür, dass die Bildunterschrift über die gesamte Breite geht.
  • color: white;: der Text wird weiß,
  • background: black;: der Hintergrund ist als schwarzer, bzw. grauer Balken sichtbar.
  • opacity: 0.5;: Der Hintergrund wird durchscheinend. Dies gilt aber auch für den Text, so dass ein zu niedriger Wert < 0.3 fast nicht lesbar ist.

Der Hover-Effekt[Bearbeiten]

Trotz durchscheinendem Hintergrund liegt nun ein Balken über unserem Bild. Wir können diesen im Normalfall verschwinden lassen und erst bei :hover einschweben lassen:

Beispiel: einschwebende Bildunterschrift
figcaption {
  opacity: 0;
  bottom: -3em;
  transition: all 1s ease;
}

figure:hover figcaption {
  opacity: 1;
  bottom: 0;
}

Im mittleren Bild wird die Bildunterschrift im Normalzustand durch bottom:-3em; unterhalb des Rands positioniert. opacity:0 verhindert, dass die Bildunterschrift sichtbar ist.

Erst bei :hover wird die Bildunterschrift mit opacity: 1; sichtbar und durch bottom: 0; an den unteren Rand geschoben.

Das overflow:hidden; des figure-Element verhindert, dass die Bildunterschrift schon außerhalb des Bildes zu sehen ist.

Beispiel: Alternativen ansehen …
figure.mitte figcaption {     
  width: 0;
  left: 50%;
} 
	  
figure.rechts figcaption{      
  width: 0;
  bottom: 50%;
  left: 50%;
  overflow: hidden;
}

Die mittlere Bildunterschrift hat zusätzlich eine Breite von 0. Bei :hover dehnt sich die Bildunterschrift aus der Mitte heraus in ihre Originalposition.

Die rechte Bildunterschrift entspringt in der Mitte des Bildes und schiebt sich dann nach unten.

Wo kommt das Fragezeichen her?[Bearbeiten]

Damit man überhaupt weiß, dass es eine (im Normalfall ja nicht sichtbare) Bildunterschrift gibt, wird mittels Pseudoelement :before ein Fragezeichen im linken unteren Bildrand platziert.

Beispiel: einschwebende Bildunterschrift
figure:before { 					
  content: "?"; 
  position: absolute; 
  bottom: 1em;
  left: 1em;
  background: white; 
  color: black;
  opacity: 0.5;
  width: 1.5em;
  height: 1.5em;
  border-radius: 1em;
  text-align: center;
  font-size: 1.5em;
  line-height: 1.5em;
  transition: all 1s ease;
}

figure:hover:before {
  opacity: 0;
}

Sobald der Benutzer mit der Maus über das Bild fährt, verschwindet es wieder. Damit dieser Wechsel nicht zu abrupt erscheint, legen wir weiche Übergänge mit transition fest.

Wie geht es weiter?[Bearbeiten]

Hier finden Sie noch weitere Möglichkeiten Bilder zu präsentieren: