Need: CSS-Gott :-D

Begonnen von accessburn, 14 Februar 2018, 18:28:13

Vorheriges Thema - Nächstes Thema

accessburn

Hallo,

ich versuche zwei Effekte auf ein hover zu legen. Scheitere jedoch.
Kann sich das mal jemand anschauen der was davon versteht? Sonst werfe ich den Mist irgendwann aus dem Fenster  >:(

https://jsfiddle.net/be0z5kzz/

Was soll es tun?
Beim hovern soll das Bild ausgrauen und die Titelbinde v.l.n.r. einfaden und das Bild wieder sauber verlassen nach dem Verlust des hovers.
Wezzy Rpi2b> FHEM, Elro, Intenso, FTUI, Jeelink v3, Max!Cube, Fire5, Foscam, NAS, Fritz!Box + Fon, Max!Wandthermostat, Amazon Echo
Wezzy Rp3b> OctoPi
Jessie Rp3b> UPNP, NAS, Pi-Hole

drhirn

z.B.: https://jsfiddle.net/amyj4o78/

Ist noch Verbesserungspotential da. Da wird leider auch die Schrift ausgegraut. Das wollte ich noch verhindern. Aber mir rennt grad die Zeit davon. Kann ich mir morgen noch ansehen, wenn du möchtest.

accessburn

geht das auch ohne die background-url sondern klassisch mit img-tag?
Wezzy Rpi2b> FHEM, Elro, Intenso, FTUI, Jeelink v3, Max!Cube, Fire5, Foscam, NAS, Fritz!Box + Fon, Max!Wandthermostat, Amazon Echo
Wezzy Rp3b> OctoPi
Jessie Rp3b> UPNP, NAS, Pi-Hole

drhirn

Wird schwieriger. Aber bevor ich mir das ansehe, könntest du kurz erklären, was du damit machen möchtest? Ich befürchte nämlich, die "freie" Positionierung des ganzen Werkes könnte dann etwas schwierig werden.

drhirn

Der hier ist schwer zu positionieren: https://jsfiddle.net/amyj4o78/5/
Wenn's auch sowas sein darf, da wär's leichter: https://jsfiddle.net/y0cva2m9/

accessburn

Also die alternative Lösung sieht nicht schlecht aus. Ich müsste es mal einbauen und testen :-)
Wezzy Rpi2b> FHEM, Elro, Intenso, FTUI, Jeelink v3, Max!Cube, Fire5, Foscam, NAS, Fritz!Box + Fon, Max!Wandthermostat, Amazon Echo
Wezzy Rp3b> OctoPi
Jessie Rp3b> UPNP, NAS, Pi-Hole