Hiding/removing hover overlay - music player

[Dreamweaver_ 2]

Hi, I have hidden the display of the cover art and some parts of the overlay function such as the play button from the music player but some residual elements of the hover overlay container are still visible. Please can you help to target this overlay container to hide the rest of the visual elements as shown in the images attracted. I still want to use the hover overlay function in the rest of the website, so only the music player should be targeted. Thanks.

[Luke 37071]

Moving to Web App CSS section. Thanks.

[Dreamweaver_ 2]

Hi Luke, as I understand the hover overlay function is part of the emby server, so any code added to the custom CSS is just to manipulate that hover overlay function. If I remove it, it affects other parts of the site, not only the player. Perhaps there is a way to disable the div. for the cover art in the music player. If it's possible and not a bad idea, let me know how. Thanks.

[Luke 37071]

Yea it's probably going to require a very specific css selector.

[arrbee99 1560]

Don't know if this helps. Bear in mind I have no idea what I'm doing (that 'relative' position for example) or what other things / objects it affects (too lazy to check), but

/* Try to shrink music playing invisible box */
div.card.squareCard.osdRemoteControlImageCard-automargin.card-hoverable
 {width:200px !important;}

/* and reposition it */
div.card.squareCard.osdRemoteControlImageCard-automargin.card-hoverable
 {position: relative;
  left: 300px;
  margin-top: 500px; !important}

it (hopefully) makes the box smaller and moves it down and over, so you can still find it (you have to know to look of course) and still select the heart and three dots items.

Maybe someone will help who actually knows what they're doing later...

[Dreamweaver_ 2]

Hi @ arrbee99,

My dear fellow, thanks a mil for the response. You helped on many levels. First, I battled this problem for some time. Couldn’t figure it out. Second, you saved my life because I already loaded my gun and left it on dining room table in case things didn’t work out. Furthermore, a while back I was looking to revamp the default emby theme starting from scratch and was looking for a custom CSS template. I came across yours in another thread (https://emby.media/community/index.php?/topic/103605-a-few-css-bits-mostly-from-other-people/). I pasted the code and wrestled with it for a few days, some parts are gone but most stayed, and some are super useful. However, one small piece of code was a real gem (filter: blur(0px) grayscale (80%)). It changes the whole site into a retro feel and look. I know it won’t be for everybody, but for me it’s keeper. I believe it is the only true theme as it colorizes all aspects of the site with a universal color template. I won’t be able to go back to multi colored posters etc. Having one of the default color themes feels like I’m walking into a candy store at a carnival. The site has come a long way and I’m working some odds and ends.

Thanks again for the code in this thread. However, one does not need both pieces of code. This will make the whole container completely hidden:

/* Hide the cover art container - music playing */

div.card.squareCard.osdRemoteControlImageCard-automargin.card-hoverable {width: 0px !important;}

You’re a champ!

[arrbee99 1560]

I really should try the black and white(ish) thing again, but I guess these things come and go in phases for me. Probably won't be long before I get really bored with the whole rounded white frames thing...

Still, glad it worked out in the end, and hopefully, bearing in mind its only Emby (did I just say that), I'd recommend sticking with this kind of armament