Graustufen-Bilder farbig werden lassen

Manchmal passen die zur Verfügung stehenden Bilder nicht ideal zusammen. Sie wurden nicht am gleichen Ort mit den gleichen Kameras und Einstellungen aufgenommen.

Das kann man mit CSS-Filtern etwas optimieren, zum Beispiel: Bilder können in Graustufen dargestellt, wenn man mit der Maus über ein Bild fährt, wird das Bild farbig. Das verhindert, dass mehr als ein Bild auf einmal farbig ist.

Natürlich wäre die beste Lösung einen perfekten Satz an Bildern zu haben. Das ist aber leider nicht immer machbar. Ich hoffe, dass diese Variante hilft!

Der Code, der im Video dazu verwendet wird, kann hier kopiert werden. Um zu sehen, was genau damit zu tun ist, schau dir bitte das kurze Video an!

CSS-Code aus dem Video

Keine Angst, du wirst nicht mit gefährlichem Code konfrontiert!

.bildeffekt{
    -webkit-filter: grayscale(100%) blur(2px);
    filter: grayscale(100%) blur(2px);
}

.bildeffekt:hover{
    -webkit-filter: grayscale(0%) brightness(120%);
    filter: grayscale(0%) brightness(120%);
}

Video: Graustufen-Bilder werden farbig beim “Hover-Effekt”