Music album fade out

[arrbee99 1815]

Anybody hopefully have any idea how to fix this, where it brightens before fading away. It should be that bright to begin with -

Emby music fade out.mkv

css is -

/* Remove album poster from playlist, reappear on hover with fade-in/out */
div.card.squareCard.osdRemoteControlImageCard.osdRemoteControlImageCard-automargin.card-hoverable:hover {opacity: 0.0;transition: opacity 2s;}

div.card.squareCard.osdRemoteControlImageCard.osdRemoteControlImageCard-automargin.card-hoverable:hover {opacity: 1.0;}

div.card.squareCard.osdRemoteControlImageCard.osdRemoteControlImageCard-automargin.card-hoverable {opacity: 0.0;transition: opacity 2s;}

 

 

[Happy2Play 9780]

6 minutes ago, arrbee99 said:

Anybody hopefully have any idea how to fix this, where it brightens before fading away. It should be that bright to begin with -

Emby music fade out.mkv 1.52 MB · 1 download

css is -

/* Remove album poster from playlist, reappear on hover with fade-in/out */
div.card.squareCard.osdRemoteControlImageCard.osdRemoteControlImageCard-automargin.card-hoverable:hover {opacity: 0.0;transition: opacity 2s;}

div.card.squareCard.osdRemoteControlImageCard.osdRemoteControlImageCard-automargin.card-hoverable:hover {opacity: 1.0;}

div.card.squareCard.osdRemoteControlImageCard.osdRemoteControlImageCard-automargin.card-hoverable {opacity: 0.0;transition: opacity 2s;}

 

 

And did you look at the .cardOverlayContainer?

[arrbee99 1815]

I'm still the trial and error type and didn't see any reason to look at that. My css has scattered mentions to do with making backgrounds transparent. Is that connected ?

[arrbee99 1815]

Adding -

div.cardOverlayContainer {background:transparent;}

does fix it thank you. Will have to see if it affects other stuff.

[Happy2Play 9780]

31 minutes ago, arrbee99 said:

Adding -

div.cardOverlayContainer {background:transparent;}

does fix it thank you. Will have to see if it affects other stuff.

Yep as the card.css applies it.  But your code will apply to all cardOverlayContainer if it matters.

 

You can target if need as you have a lot to choose from.

Quote

div.view.flex.flex-direction-column.page.focuscontainer-x.view-videoosd-videoosd.darkContentContainer.graphicContentContainer > div.videoOsdBottom.flex.videoOsd-nobuttonmargin.videoOsdBottom-remotecontrol.videoOsdBottom-safe.padded-top-page.videoOsdBottom-split > div.videoOsdBottom-maincontrols.videoOsdBottomMaincontrols-autoexpand > div.osdPosterContainer.flex.flex-direction-column.itemsContainer.osdPosterContainer-autoexpand.vertical-wrap > div > div > div.cardOverlayContainer.itemAction.cardPadder-square

Like

div.osdPosterContainer-autoexpand div.cardOverlayContainer

or

div.videoOsdBottom-maincontrols div.cardOverlayContainer

 

Edited February 10, 2025 by Happy2Play

[arrbee99 1815]

Thank you.

You don't happen to know if there's a way to target the backdrop just on the music page. Thought it might be handy to be able to make the backdrop go a bit black and white while hovering over the album art.

[Happy2Play 9780]

12 hours ago, arrbee99 said:

Thank you.

You don't happen to know if there's a way to target the backdrop just on the music page. Thought it might be handy to be able to make the backdrop go a bit black and white while hovering over the album art.

Maybe .nowplaying-backgroundcontainer-brighter

[arrbee99 1815]

Been trying this, plus of course almost infinite variations, but no joy

div.card.squareCard.osdRemoteControlImageCard.osdRemoteControlImageCard-automargin.card-hoverable:hover {opacity: 1.0;} .nowplaying-backgroundcontainer-brighter {backdrop-filter: grayscale(100%);}

div.card.squareCard.osdRemoteControlImageCard.osdRemoteControlImageCard-automargin.card-hoverable {opacity: 0.0;transition: opacity 2s;} .nowplaying-backgroundcontainer-brighter {backdrop-filter: grayscale(0%);transition: backdrop-filter 2s;}

if i have the 100 / 0 grayscales like that shown the backdrop stays fixed and is coloured. if i swap them round the backdrop stays fixed and black and white. So can't get the background to change to b&w when hovering over the album (which appears and disappears as it should).