Überlagerungsfadein Effekt

[Peerless]

Hallo,

ich möchte ein Bild von Grau nach farbig faden lassen, dafür habe ich 2 passende bilder generiert. jetzt hatte ich die idee hinter das bild ein hintergrundbild zu setzen und das andere darüber einfaden zu lassen. das ansich funktioniert auch, aber das vordergrund bild ist immer kleiner als das Hintergrundbild. Habe ich eine Chance das halbwegs einfach zu ändern ?

[lucina]

Ich denke, für sowas gibt es Filter, die man dann sicher auch mit Keyframes kombinieren kann: https://developer.mozilla.org/en-US/docs/Web/CSS/filter

[Peerless]

es geht auch wenn ich das hintergrund bild im grid element lade, dann passt auch die grösse :-) vorher hatte ich noch ein wrapper element verwendet

[Peerless]

....aber leider nur auf dem desktop, mobil wird das overlay unter das hintergrund bild gesetzt :-(

[lbableck]

Was spricht denn dagegen das über CSS Filter zu machen? Das wäre die schönere Lösung.

[Peerless]

gerade mal ausprobiert, ja das wäre eine schöne lösung, ich bin aber nicht in der lage da in den filtercode eine animation zu bauen die 1 sek dauert

[lbableck]

Das geht mit Filter auch. Dazu kannst du ggf. auch einfach eine Transition verwenden.

[Peerless]

wenn ich das ins style feld schreibe passiert aber keine veränderung am filter: filter: grayscale(100%) brightness(1.2) blur(2px); transition: all 1s ease-out;

[lucina]

https://css-tricks.com/almanac/prope...mating-filters

[Spooky]

wenn ich das ins style feld schreibe passiert aber keine veränderung am filter: filter: grayscale(100%) brightness(1.2) blur(2px); transition: all 1s ease-out;

Die transition darfst du natürlich nicht gemeinsam mit dem Effekt definieren - sonst gibt es ja keine Transition.

[Peerless]

könnte jemand so nett sein mir einmal mein beispiel code richtig stellen :-) das grid ist an der stelle auch nicht limitiert ? ich hab da ja nur die eine zeile

[Spooky]

Poste dein aktuelles CSS.

[Peerless]

ich möchte das nur in die Eigene Styling-Definitionen vom grid schreiben

[Spooky]

Wir wissen nicht was du mit "vom grid" meinst. Wenn du Hilfe brauchst, das CSS entsprechend zu schreiben, musst du deinen aktuellen Versuch hier posten.

[Peerless]

ok, das grid ist wieder son ding von meinem theme(zumindest funktioniert da ein nicht animierter filter). jetzt habe ich mich belesen das wenn ich in meine customize.css > .graues-bild {filter: grayscale(100%);} male, dann müsste ich das bild grau bekommen wenn ich in die css klasse meines bildes "graues-bild" schreibe ?

das habe ich getan, aber dann passiert leider gar nichts

[Spooky]

Da wir weder deine Website, noch dein Theme, noch sonst irgendwas von deiner Contao Installation wissen, kann man da so nicht weiterhelfen. Dein Problem hat ja außerdem auch gar nichts direkt mit Contao zu tun - sondern ist eine reine CSS Frage.

[Peerless]

ja ist richtig, ich habe den fehler gefunden... liegt am rechner der zeigt das einfach nicht an

[Peerless]

so... ich bekomme den effekt hin. aber mir fehlt jetzt leider noch die idee wie man den effekt triggert das er erst anläuft wenn das bild im scrollbereich ist, vielleicht könnte ich dazu nochmal einen tip bekommen

[Spooky]

JavaScript Libraries wie bspw. ScrollMagic können dir dabei helfen.

[Peerless]

danke, auch das habe ich jetzt hin bekommen... verrückt ist aber das ich das nur in der mobilansicht sehe, ich dachte ja erst es liegt an dem rechner. aber es betrifft die desktop version auf allen geräten

[Peerless]

auch das gefunden, liegt am vieport

[Peerless]

... ich komm da doch leider nicht weiter :-( alles suchen hat bis jetzt nicht klären können warum die styles erst angewand werden wenn es nicht mehr desktop ist. hat dazu jemand eine idee ? sprich wenn ich mit f12 die konsole aufrufe, ist mein bild im desktop browser kleiner und die styles sind da

[lucina]

Siehe https://community.contao.org/de/show...l=1#post593711

Weder kennen wir dein Theme, noch deine Styleheets. Und in Glaskugeln schauen gehört nicht zu unseren Kernkompetenzen.