Bilder im Internet/Einbindung mit img
Text-Info
- 30min
- einfach
- Kenntnisse in
● Einstieg in HTML
● Einstieg in CSS
Mit dem img-Element (image (englisch für Bild)) können Sie Grafikdateien in Ihre HTML-Dokumente einbinden.
Dieses Tutorial zeigt, wie Sie das tun, was Sie dabei beachten müssen und wie Sie solche Bilder mit CSS gestalten können.
Inhaltsverzeichnis
Element ohne Inhalt?[Bearbeiten]
<img>
ist ein sogenanntes Standalone-Tag ohne Elementinhalt und ohne End-Tag.
Die Grafik wird nicht direkt im HTML-Dokument, bzw. im img-Tag gespeichert, sondern bleibt an ihrem Speicherort.
Bildquellen mit src und srcset angeben[Bearbeiten]
Das src-Attribut referenziert die Quelle (engl. source) der Bilddatei. Diese kann wie in HTML üblich relativ oder absolut angegeben werden. Sie wird dann vom Browser als embedded content (eingebetteter Inhalt) in die Webseite eingebunden.
Falls Ihre Bilder nicht laden, gehen Sie bitte folgende Schritte durch:
- Ist Ihr HTML-Markup valide?
- Befinden sich die Bilder auch wirklich in dem Verzeichnis, das referenziert wurde?
- Sind URL und Dateiname wirklich identisch?
Windows ist case-insensitiv, sodasssrc="bild.jpg"
auchbild.JPG
laden würde. Auf dem (Linux)-Server würde er vergeblich die Datei mit der kleingeschriebenen Dateiendung suchen.
Beachten Sie die Konventionen für Dateinamen!
Es ist auch möglich, mit dem srcset-Attribut Bilder in verschiedenen Größen zu referenzieren, die dann entsprechend geladen werden.
Als Parameter enthält das srcset-Attribut eine kommagetrennte Liste mehrerer …
- URLs , ergänzt durch die optionale Angabe der
- Breite: positive Zahl gefolgt von einem w. (Defaultwert ist unendlich)
- Pixeldichte: positive Zahl gefolgt von einem x. (Defaultwert ist 1x)
In diesem Beispiel werden im srcset mehrere URL angeboten. Browser ohne srcset-Support zeigen das mit src
referenzierte Bild an, für Retina-Displays werden alternative hochauflösende Bilder zur Verfügung gestellt.
alt - Beschreibungen für Bilder und Grafiken[Bearbeiten]
Es kann aber trotzdem vorkommen, dass Bilder (aufgrund einer schlechten Internetverbindung) nicht geladen werden oder Nutzer sich die Seite mit einem Screenreader vorlesen lassen.
Ein Weg, etwas über den Inhalt der Grafik zu erfahren, ist der Alternativtext, der mithilfe des alt-Attributs jeder Grafik im HTML-Quellcode beigefügt werden muss. Im Vorlesemodus wird dann dieser Alternativtext angesagt. Fehlt das alt-Attribut, dann sagen einige Screenreader Teile des Dateinamens an. Aus diesem Grund haben das alt-Attribut und Alternativtexte eine sehr wichtige Bedeutung.
Das alt-Attribut ist eine Pflichtangabe.
(optionale) Breiten- und Höhenangaben[Bearbeiten]
Ohne weitere Festlegungen nehmen Bilder ihre volle Größe ein. Deshalb ist es empfehlenswert, immer auch eine Breiten- und Höhenangabe hinzuzufügen:
- width
- height geben die Bildbreite bzw. -höhe an. Der Wert wird in CSS-Pixel angegeben.
(In HTML4 war eine Angabe in Bildschirmpixeln (mit Einheitpx
) und Prozentangaben zulässig).
<figure>
<img src="Hund.gif" alt="Hund mit Halsband und gefletschten Zähnen.">
<figcaption>Das Bild enthält die Quellenangabe src="..." und einen alt-Text.</figcaption>
</figure>
<figure>
<img src="Hund.gif" width="104" height="90" alt="Hund">
<figcaption>Das Bild enthält neben den Pflichtangaben noch feste Abmessungen,
sodass es auf 50% seiner Größe skaliert wird.
</figcaption>
</figure>
Sie sollten stets die Breite und Höhe der Grafik im Quelltext mit angeben. Dadurch entnimmt der Web-Browser bereits der HTML-Datei, wie groß die Grafik ist, und muss nicht warten, bis er die entsprechende Header-Information der Grafikdatei ausgelesen hat. So kann er die gesamte Web-Seite bereits am Bildschirm aufbauen und bei noch nicht eingelesenen Grafiken erst mal eine entsprechend große Freifläche anzeigen.
Sonst wartet der Browser dagegen mit der Anzeige der Web-Seite, bis er alle nötigen Größenangaben aus eingebundenen Grafikdateien eingelesen hat, oder er muss den Bildschirmaufbau korrigieren, was nicht sehr schön aussieht.
flexible Breiten im responsiven Webdesign[Bearbeiten]
Im responsiven Webdesign sollen Bilder (und der Rest der Webseite) auf jedem Bildschirm gut aussehen. Da die Gesamtbreite des verfügbaren Viewports nicht bekannt ist, kann man auch keine feste Breite vergeben. So würde ein 200px breites Bild auf einem Handy mit 20em breiten Viewport nur ca. 6em (≙≈ 100px) für den umfließenden Text lassen.
Deshalb ist es sinnvoll, Bildern per CSS zuerst die volle Breite und erst bei größeren Viewports einen festen oder relativen Wert zuzuweisen:
img {
width: 100%;
height: auto;
}
@media (min-width: 25em) {
img {
width: 50%;
float: right;
margin: 0 0 1em 1em;
}
}
@media (min-width: 50em) {
img {
width: 25%;
}
}
Das Bild erhält auf kleinen Bildschirmen die volle Breite.
Eine Medienabfrage an den Browser lässt das Bild bei einer Viewport-Breite von mehr als 25em auf die halbe Breite schrumpfen und mit float an die rechte Seite floaten (engl. für schweben, hängen). Passend dazu erhält es mit margin einen unteren und linken Abstand zum umfließenden Text.
Es ist ebenso möglich, eine Maximalbreite anzugeben:
img {
width: 100%;
max-width: 500px;
height: auto;
}
Lazy Loading[Bearbeiten]
Das loading-Attribut legt fest, wie externe Medien geladen werden sollen.[3]
- Browserunterstützung
- caniuse.com
erlaubte Werte
-
auto
(Standardwert) Browser lädt Grafiken … -
eager
: Medien above the fold sollen bevorzugt geladen werden. (Der Begriff Above the fold beschreibt im Printdesign die sichtbare Hälfte einer Zeitung, im Webdesign den Bereich einer Website, der dem Besucher auf den ersten Blick angezeigt wird, also nicht erst durch Scrollen sichtbar wird. Mit CSS allein kann nicht erkannt werden, ob sich ein Bereich innerhalb des Viewports befindet. Mit getBoundingClientRect kann dies per JavaScript ermittelt werden.) -
lazy
: Medien außerhalb des sichtbaren Bereichs sollen erst geladen werden, wenn der Benutzer scrollt.
<img src="hund.jpg" loading="lazy" width="1000" height="750" alt="..." >
Bilder mit CSS gestalten[Bearbeiten]
In diesem Abschnitt lernen Sie, wie Sie Bilder mit CSS gestalten können.
Bilder in Webseiten sind insofern ein Sonderfall, da das img-Element ein so genanntes ersetztes Element ist. Es ist eigentlich nur ein inhaltsleerer Container für das von anderer Stelle geladene Bild. Deshalb beschränkte sich die Gestaltung durch CSS eigentlich nur auf die Abmessungen und Abstände des Bildes.
Heute können Sie mit CSS-Filter und mix-blend-mode auch das Aussehen der Bilder selbst verändern.
Bildeffekte mit Filtern und Rahmen[Bearbeiten]
Dieses Beispiel soll nur aufzeigen, dass die border-Eigenschaft mehr als nur eine einfache Randlinie erzeugen kann.
Mit der CSS-filter-Eigenschaft können Sie Bilder verfremden. Dies mag in Einzelfällen interessant sein; generell ist hier aber auch weniger oft mehr.
#blackwhite {
filter: grayscale(1);
border:solid 2vmin #eee;
border-bottom-color:#fff;
border-left-color:#eee;
border-radius:2px;
border-right-color:#eee;
border-top-color:#ddd;
box-shadow:0 0 5px 0 rgba(0,0,0,.25) inset, 0 5px 10px 5px rgba(0,0,0,.25);
padding:3vmin;
position:relative;
}
#blackwhite:before {
border-radius:2px;
bottom:-2vmin;
box-shadow:0 2px 5px 0 rgba(0,0,0,.25) inset;
content:"";
left:-2vmin;
position:absolute;
right:-2vmin;
top:-2vmin;
}
#blackwhite:after {
border-radius:2px;
bottom:-2.5vmin;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.25);
content:"";
left:-2.5vmin;
position:absolute;
right:-2.5vmin;
top:-2.5vmin;
}
#two {
border:1em groove gold;
}
#three {
border:1em double black;
filter: url('#KantenErkennung');
}
Im letzten Bild mit der id #three
wird ein SVG-Filter eingebunden, der im HTML-Dokument in einem SVG-Abschnitt notiert ist.
Größenanpassung mit object-fit[Bearbeiten]
Mit object-fit und object-position kann man das Bild innerhalb des durch das img-Element gebildeten Containers positionieren.
Die object-fit Eigenschaft gibt an, wie die Inhalte eines ersetzten Elements wie img oder video an die Inhaltsbox angepasst werden, die durch dessen verwendete Höhe und Breite erzeugt wird.
So kann ein Bild in der Größe angepasst werden, dass es seine Inhaltsbox vollständig ausfüllt, ohne dabei sein Seitenverhältnis zu verlieren. Falls das Seitenverhältnis nicht übereinstimmt, wird die Grafik zugeschnitten oder es bleibt ein (gewollter) Rand:
.fill {
object-fit: fill;
}
.contain {
object-fit: contain;
}
.cover {
object-fit: cover;
}
.none {
object-fit: none;
}
.scale-down {
object-fit: scale-down;
}
Die Bilder erhalten eine feste Größe von 12em Breite und 9em Höhe (Seitenverhältnis 4:3). Da die referenzierte SVG-Grafik aber ein Seitenverhältnis von 5:2 hat, muss sie an die Größe des img-Elements angepasst werden.
Die fünf Beispiele zeigen die verschiedenen Werte.
Kreisrunder Ausschnitt eines rechteckigen Bildes[Bearbeiten]
Wenn man ein rechteckiges Bild kreisrund darstellen möchte, kann man mit border-radius: 50%
die Ecken abrunden. Allerdings verzerrt sich das Bild, wenn man Höhe und Breite auf den gleichen Wert setzt. Anstelle des Einsatz eines Container-Elements ist dies mit object-fit
und object-position
viel einfacher:
Die object-position Eigenschaft bestimmt ähnlich der background-position, an welcher Stelle sich die linken oberen Ecken von ersetzten Elementen befinden sollen.
.rund {
object-fit: cover;
object-position: 50% 0;
border-radius: 50%;
width: 15em;
height: 15em;
}
.vergleich {
object-fit: cover;
object-position: 50% 100%;
border-radius: 50%;
width: 15em;
height: 15em;
}
Die abgerundeten Bilder erhalten eine feste Größe von 15em Breite und 15em Höhe. Da die referenzierte Grafik aber rechteckig ist, wird sie mit object-position
im ersten Beispiel .rund
so nach oben verschoben, dass das Gesicht im Mittelpunkt ist. Im zweiten Beispiel .vergleich
richtet sich das Bild am unteren Ende aus.
Panorama mit Image-Slider[Bearbeiten]
Dieses Beispiel beruht auf einem Missverständnis im Forum. Der Threadersteller wollte eigentlich ein Bilderkarussell - ein slider ist ein Schieberegler type = "range"
. Er eignet sich dafür, Panoramabilder, die aufgrund ihrer Breite nur in geringer Höhe dargestellt werden können, so zu formatieren, dass jeweils ein Ausschnitt größer dargestellt wird:
figure img, figcaption, input {
width: 335px;
max-width: 100%;
margin-bottom: 0.4em;
}
figure img {
height: 335px;
object-fit: cover;
object-position: calc(var(--percentage, 0) * 1%) center;
}
Das Bild innerhalb des figure-Containers (figure img
) wird 335px breit und hoch, obwohl das Panorama viel breiter ist. Mit object-fit:cover
füllt es nun den gesamten Platz, deshalb stehen die Seiten außerhalb des verfügbaren Platzes. Mit dem Slider wird bei einer Eingabe über eine CSS-Variable der Wert für object-position
verändert und das Bild entsprechend verschoben.
Qualität der Bildskalierung mit image-rendering beeinflussen[Bearbeiten]
Es ist oft so, dass Sie ein Bild nicht in seiner natürlichen Größe anzeigen wollen. Statt dessen muss es vergrößert oder verkleinert werden. Die Browser verwenden dafür zumeist ein Interpolationsverfahren wie bilineare Filterung (oder Interpolation). Es funktioniert für Fotos recht gut und stellt einen Kompromiss zwischen Qualität und Geschwindigkeit dar.
Wenn viele oder große Bilder zu skalieren sind, wird der Ressourcenbedarf des Verfahren aber doch merklich. Und für Bilder, die keine Fotos, sondern Grafiken mit scharfen Kanten sind, führt ein für Fotos vorgesehenes Verfahren zu unerwünschten verschwommenen Übergängen.
Die CSS Images Module 3 Spezifikation adressiert dieses Problem und führt die Eigenschaft image-rendering ein. Hiermit können Sie Einfluss auf den verwendeten Skalierungsalgorithmus nehmen. Leider ist die Browserunterstützung auch in 2022 noch relativ uneinheitlich.
Diese CSS Eigenschaft ist vom SVG Präsentationsattribut gleichen Namens abgeleitet, verwendet aber andere Werte.
img {
image-rendering: crisp-edges;
}
Die genaue Bedeutung der einzelnen Werte ist etwas vage. Die Spezifikation hat sich einige Male verändert, und der neueste Arbeitsentwurf (WD2022) weicht von der Kandidatenempfehlung (CR2020) von 2020 ab. In der MDN Dokumentation stehen teils wieder andere Dinge - vermutlich, weil der dortige Text verfasst wurde, als die Spezifikation noch einen anderen Stand hatte.
-
auto
- Standardwert. Der Browser wählt den Skalierungsalgorithmus aus. Normalerweise handelt es sich hier um die bilineare Filterung, bei dem ein Bildpunkt im skalierten Bild auf seine Position im ursprünglichen Bild umgerechnet wird und dann ein gewichteter Mittelwert der Farbwerte der umgebenden Bildpunkte gebildet wird. Je näher ein Original-Bildpunkt an der berechneten Position ist, desto stärker geht sein Farbwert in den gebildeten Mittelwert ein.
-
crisp-edges
- Mit diesem Wert soll der Browser ein Interpolationsverfahren wählen, das Kontrast und Kanten im Bild erhält und weder Farben glättet noch Unschärfe im Bild erzeugt (CR2020). WD2022 verlangt explizit das nearest-neighbour Interpolationsverfahren. Sie können sich das so vorstellen, dass wie bei der bilinearen Filterung eine Position im Orignalbild errechnet wird, die Koordinaten dann aber einfach auf ganze Zahlen gerundet werden und der Farbwert dieses Bildpunktes verwendet wird.
- Chromium-Browser kennen diesen Wert nicht und bleiben bei
auto
. MDN behauptet zwar, dass Chrome einen alternativen Namen-webkit-optimzie-contrast
kennen würde, steht damit aber im Widerspruch zu caniuse.com, wo dieser Wert nur für ältere Safari-Versionen genannt wird. Eigene Versuche geben caniuse recht, Chrome kennt - zumindest in 2022 - diesen Wert nicht oder nicht mehr. - Firefox kennt diesen Wert, dem Augenschein nach interpretiert er ihn aber als
pixelated
. -
pixelated
- Der Browser soll als Interpolationsverfahren nearest-neighbour oder ein ähnliches Verfahren verwenden, um im Bild ein „pixeliges Aussehen“ zu erhalten (CR2020). WD2022 ergänzt das so, dass die pixelige Natur des Bildes möglichst erhalten bleiben soll, aber leichte Glättungen zulässig sind, um unangenehme Verzerrungen zu vermeiden.
-
smooth
- Der Browser soll einen qualitiativ hochwertigen Interpolationsalgorithmus wählen, der für Fotos geeignet ist.
- Zur Zeit (2022) ist dieser Wert noch in keinem Browser implementiert.
-
high-quality
- Ähnlich wie
smooth
, aber ein mithigh-quality
gekennzeichnetes Bild soll vorrangig mit einem anspruchsvollen Algorithmus bearbeitet werden, sofern die Leistungsressourcen auf dem Computer eingeschränkt sind. - Zur Zeit (2022) ist dieser Wert noch in keinem Browser implementiert.
-
optimizeSpeed
undoptimizeQuality
- Diese Werte werden in der SVG Spezifikation verwendet und befanden sich kurzfristig auch in der CSS Spezifikation. Deshalb werden sie dort als Kompatibilitätswerte geführt und entsprechen den Angaben
smooth
undpixelated
.
Bildunterschriften[Bearbeiten]
Um Bildern eine passende Erklärung oder Bildunterschrift zu geben ist das figcaption-Element in Verbindung mit dem figure-Container ideal. Es ist vor allem aus Gründen der Semantik den leider immer noch häufig anzutreffenden Lösungen mit verschachtelten div-Elementen vorzuziehen.
<figure>
<img src="lauf-1.jpg" alt="Lauf an der Pegnitz - Nürnberger Tor">
<figcaption>Lauf an der Pegnitz - Nürnberger Tor</figcaption>
</figure>
Als Container für das img-Element und die figcaption dient ein figure-Element.
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:
figure {
position: relative;
margin: 0;
padding: .5em;
width: 100%;
border: thin solid gainsboro;
background: white;
width: 100%;
}
@media (min-width: 25em) {
figure {
width: 20em;
float: right;
}
}
figcaption {
padding: .8em;
text-align: center;
}
Hier werden einige Einstellungen festgelegt, die erst später wichtig werden:
- Außen- (margin) bzw. Innenabstände (padding) festlegen,
- die Bildunterschrift mit text-align zentrieren,
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:
<figure id="gallery">
<figcaption>Ansichten von Lauf an der Pegnitz</figcaption>
<figure>
<img src="//wiki.selfhtml.org/images/a/a6/Lauf-1.jpg" alt="Lauf an der Pegnitz - Nürnberger Tor">
<figcaption>Nürnberger Tor</figcaption>
</figure>
<figure>
<img src="//wiki.selfhtml.org/images/4/4a/Lauf-2.jpg" alt="Lauf an der Pegnitz - Pegnitz">
<figcaption>Brücke über die Pegnitz</figcaption>
</figure>
<figure>
<img src="//wiki.selfhtml.org/images/2/24/Lauf-3.jpg" alt="Lauf an der Pegnitz - Nürnberger Tor">
<figcaption>Mauermühle und Judenturm</figcaption>
</figure></figure>
Um die einzelnen Bilder nebeneinander zu positionieren, gibt es mehrere Möglichkeiten in CSS:
- Die figure-Elemente sind Block-Elemente, die mit
display: inline-block;
nebeneinander positioniert werden können
→ dafür müssen sie dann passende Breiten und Abstände erhalten. - ein ähnlicher Effekt ist mit flexbox möglich. Hier kann man mit justify-content noch bestimmen, wie ein einzelnes Kindelement in der letzten Zeile positioniert wird.
- mit Grid Layout wird das Elternelement zum Grid Container. Es kann eine feste Spaltenanzahl festgelegt werden, es ist aber auch möglich Raster implizit zu erzeugen, die durch den auto-placement-Algorithmus Rasterelemente automatisch auf den verfügbaren Platz verteilen.
#gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
gap: 1em;
}
#gallery > figcaption {
grid-column: 1 / -1;
}
Um im CSS ein figure figure
zu vermeiden, geben wir der Bildergalerie eine ID mit Namen gallery
.
Folgende Einstellungen sind wichtig:
-
display: grid
: erzeugt das Raster -
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
: erzeugt Rasterlemente, die zwischen 15em und einem Bruchteil des verfügbaren Platzes breit sind. -
gap: 1em;
: erzeugt einen Abstand zwischen den Rasterelementen, aber nicht außen.
Einziges Problem ist die figcaption der gesamten Galerie. Ohne weitere Festlegungen würde sie das erste Rasterlement links neben dem ersten Bild einnehmen. Mit …
-
grid-column: 1 / -1;
erstreckt es sich aber über die gesamte Breite von der ersten bis zur letzten (-1 = von rechts gezählt) Rasterlinie
Einschwebende Bildunterschriften[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:
#gallery figure {
position: relative;
}
figure img {
width: 100%;
display: block;
}
#gallery > figure > figcaption {
position: absolute;
bottom: 0;
width: 100%;
line-height: 3em;
color: white;
background: rgba(0,0,0,.3);
}
Zuerst müssen wir
a #gallery figure
relativ und
b #gallery > figure > figcaption
absolut positionieren.
Danach wird figcaption mit bottom: 0;
unten platziert.
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.3;
: Der Hintergrund wird durchscheinend. Dies gilt aber auch für den Text, sodass 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:
#gallery > figure > figcaption {
opacity: 0;
bottom: -3em;
transition: all 1s ease;
}
#gallery > 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.
#gallery > figure.mitte > figcaption {
width: 0;
left: 50%;
}
#gallery > 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.
#gallery figure::before {
content: "?";
position: absolute;
bottom: 1em;
left: 1em;
background: white;
color: black;
opacity: .7;
width: 1.5em;
height: 1.5em;
border-radius: 1em;
text-align: center;
font-size: 1.5em;
line-height: 1.5em;
transition: all 1s ease;
}
#gallery 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 mit transition weiche Übergänge fest.