[Resolved] Deactivate cover hover in sticky mp3 player

[Matthias]

Hey there!

When playing a track (see attached website link) and moving the mouse cursor over the cover in the sticky player on bottom of the website there appears an evil hover cover. Is it possible to disable this hover?

My current website CSS code is:

/* Add pseudo fixed background */

body {
    position: relative;

}

body:before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('https://www.prypjatsyndrome.de/v2/wp-content/uploads/2020/02/website-background-noretina-tinyfied.jpg');
    z-index: -1;
    background-repeat: no-repeat;
    background-position: top center;

}

/* swap psuedo fixed background image on 2x devices */

@media only screen and (min--moz-device-pixel-ratio: 2),

only screen and (-o-min-device-pixel-ratio: 2/1),

only screen and (-webkit-min-device-pixel-ratio: 2),

only screen and (min-device-pixel-ratio: 2) {

    body:before {
        background-image: url('https://www.prypjatsyndrome.de/v2/wp-content/uploads/2020/02/website-background-retina-tinyfied.jpg');
        background-size: cover;
    }

}

/* Other CSS */

button.menu-toggle {
    font-size: 20px;
    /* 20px */
}

.envira-gallery-image {border-radius: 5px !important;}

.slideout-navigation.main-navigation {
    display: flex;
    align-items: center;
}

#generate-slideout-menu .inside-navigation {
    padding-top: 0;
}

.main-navigation .main-nav ul li.menu-item-has-children>a {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;   
}

.main-navigation ul ul {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

.main-navigation .main-nav ul li[class*="current-menu-"] > a {
    border-radius: 5px;
}

.main-navigation .main-nav ul li > a {
		border-radius: 5px;
}

.main-navigation .main-nav ul li:hover > a {
		border-radius: 5px;
}

.main-navigation .main-nav ul li:focus > a {
		border-radius: 5px;
}

.main-navigation .main-nav ul li.sfHover > a {
		border-radius: 5px;
}

.envirabox-title {
	text-align: center;
}

.album-art img {
	border-radius: 5px;
}

#sonaar-player {
    left: 50% !important;
    transform: translate3d(-50%, 94px, 0) !important;
}

#sonaar-player.enable {
    max-width: 1100px !important;
    left: 50% !important;
    transform: translate3d(-50%, 0, 0) !important;
	
}

Thank you, guys!

[David]

Hi there,

try adding this CSS:

#sonaar-player .playerNowPlaying .album-art img.hover {
    display: none;
}

[Matthias]

So nice! Thank you, David!

Looks like it’s time for a donation.

[David]

Awesome glad to be of help – and thank you all donations are gratefully received.

[Author]

Posts