CSS3-Blendmodi für Bildüberlagerungen - und Alternativen

Geschrieben am: 11.7.2014

Im Artikel von Opera zu den Blendmodi gibt es schöne Beispiele für die CSS3-Blendmodi: Bilder werden über Blendmodi verfremdet und beim Hovern sieht man das Bild im Normalzustand.

Ich habe den Effekt einmal nachgebaut und dann überlegt, wie sich ähnliche Effekte ohne CSS3-Blendmodi (mix-blend-mode funktioniert derzeit nur im Chrome/Opera mit dem Flag, im Safari ab 7.1 oder in Firefox ab Version 32) erreichen lassen. Das Ziel ist dabei immer, Bilder mit einer Farbebene zu überlagern, ohne dass die Bilder von Haus aus so verändert werden.

Erst einmal hier der Link zu den Operabeispielen: (http://dev.opera.com/articles/getting-to-know-css-blend-modes/demo_blendmodes_tile.html).

Das Ergebnis ohne Blendmodi gibt es auch online zum Testen oder auch bei JSFiddle.

Das Prinzip dahinter ist Folgendes:

Wir haben im HTML-Code ein umfassendes Element, in dem das Bild steht:

<div class="blendmode"> 
  <img src="weg.jpg" alt="Weg" /> 
  </div>

Per CSS erhält das umfassende Element eine Hintergrundfarbe, die beim Hovern wieder auf transparent gesetzt wird:

.blendmode { 
  background-color: rgb(70, 155, 41); 
  opacity: 0.99; 
} 
.blendmode:hover { 
  background-color: transparent; 
}

Und beim Bild selbst wird ein mix-blend-mode festgelegt:

.blendmode img { 
  mix-blend-mode: hard-light; 
}

Erklärungsbedürftig ist die Angabe opacity: 0.99 beim umfassenden Element: Das verhindert, dass sich das Bild mit dem Seitenhintergrund (weiß) mischt. Eigentlich dafür vorgesehen ist die Eigenschaft isolation - aber da das noch nicht im Firefox 32 funktioniert, habe ich hier opacity eingesetzt, dass die erwünschte Nebenwirkung hat, einen neuen Stapelkontext zu erzeugen und damit Vermischungen mit Elternelementen zu verhindern.

Links Effekt durch mix-blend-mode, rechts beim Hovern normal

Bildüberlagerung Blendmode

Alternativen zu Blendmodie für Bildüberlagerungen - Variante 1

An sich kann man - zumindest - ähnliche Effekte auch mit Transparenzen realisieren. Beispielsweise kann man einem Element zwei Hintergrundbilder zuweisen: zum einen das gewünschte Bild und zum anderen einen leicht transparenten Farbverlauf.

.zwei { 
  background-image: linear-gradient(rgba(70, 155, 41, 0.5), 
                    rgba(70, 155, 41, 0.5)), 
                    url(weg.jpg); 
}

Wichtig ist dabei die Reihenfolge der Angabe: Damit der transparente Farbverlauf über dem Bild liegt, muss er zuerst angegeben werden.

Dann kann man beim Hovern den Farbverlauf entfernen:

.zwei:hover { 
  background-image: url(weg.jpg); 
}

Links Effekt durch transparente Überlagerung, rechts beim Hovern normal Bildüberlagerung durch transparenten Bereich

Alternative für Bildüberlagerungen - Variante 2

Im Beispiel wurde mit Hintergrundbildern gearbeitet, allerdings sollte man für Bilder, die in den normalen Text gehören, normale img-Elemente wählen. Möchte man dann denselben Effekt erreichen, kann man mit erzeugten Inhalten eine weitere "Ebene" erzeugen, für die man den transparenten Farbverlauf definiert.

Aber von Anfang: Es gibt ein umfassendes Element mit einem Bild:

<div class="drei"> 
  <img src="weg.jpg" alt="Weg" /> 
</div>

Das umfassende Element soll den Bezugspunkt für die andere Ebene bilden und erhält deswegen position: relative:

.drei { 
  position: relative; 
}

Dann kommt über erzeugte Inhalte die zusätzliche Ebene, die dieselben Ausmaße erhält wie das Bild und absolut positioniert wird:

.drei:after { 
  content: ""; 
  background: rgba(70, 155, 41, 0.5); 
  width: 300px; 
  height: 225px; 
  position: absolute; 
  top:0; 
  left: 0; 
}

Beim Hovern kann man dann die Ebene wieder transparent setzen:

.drei:hover:after { 
  background:transparent;
}

Spielerei: radiale transparente Farbverläufe auf Bildern

Bisher habe ich immer nur transparente durchgehende Flächen verwendet - auch wenn Farbverläufe eingesetzt wurde. Aber natürlich kann man etwas mehr Dynamik erzeugen, indem man beispielsweise auf radiale Farbverläufe setzt und so einzelne Teile des Bildes weniger verschleiert als andere:

.vier:after { 
  background: radial-gradient(rgba(70, 155, 41, 0.1) 30%, 
                              rgba(70, 155, 41, 0.9)); 
}

Links Farbverlauf pur, rechts auf Bild Bildüberlagerung mit radialem transparenten Farbverlauf

Natürlich gibt es wesentlich mehr Möglichkeiten zur Bildveränderung mit den CSS3-Blendmodi als über transparente Farbverläufe möglich sind. Aber für einfachere Effekte lohnt sich auch ein Blick auf transparente Farbverläufe. Klar ist allerdings: All diese per CSS erzeugten Effekte sind praktisch, weil sie sich dynamisch anwenden lassen.

Das Ergebnis online zum Testen oder bei JSFiddle.

Florence Maurice