Mithilfe von CSS Bild an der Seite leicht ausblenden?

Ich möchte ein Bild in eine section packen und es so machen, dass es an der rechten Seite leicht durchsichtig wird.

Wie bekomme ich das hin?

Danke im Voraus

Answer 1

[regex9]

Du kannst auf das Bild eine Maske setzen (mask-image).

Beispiel (für webkit-basierte Browser):

img {
  -webkit-mask-image: -webkit-gradient(linear, left center, right center, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

Bildmasken werden vom IE-Browser allerdings nicht unterstützt. Um diesen also mit einzubeziehen, solltest du das Bild selbst bearbeiten.

Comments

[HTMLBOI]

und kann man es irgendwie einstellen, sodass das Bild erst ab dem letzten Viertel erst durchsichtiger wird, damit das Bild bei der Hälfte nicht komisch aussieht?

[regex9]

@HTMLBOI

Du kannst bei einem Gradient den Verlauf genauer definieren.

https://cssgradient.io/

[HTMLBOI]

@regex9

Warum kenne ich sowas erst jetzt?

Answer 2

[threadi]

In CSS kann man Transparenz von Elementen mit opacity erreichen. Allerdings nicht von Teilbereichen eines Elementes. Es wäre vermutlich für dich einfacher das Bild selbst mit der Transparenz zu versehen.

Woher ich das weiß: Berufserfahrung – mit dem Internet verbunden seit 1993