Hover color on modal image

Support
#1

Hi guys.

I have a short code called: [image class=“video-lightbox1” src=“https://spisdinmaveflad.dk/wp-content/uploads/2017/02/101opskrifter.jpg” link=“true” href=“https://player.vimeo.com/video/300151483?autoplay=1” style=“max-height: 500px;” lightbox_video=“true”][lightbox selector=".video-lightbox1"].

When i hover the image before clicking the background is white but i want it to be #283c46.

How do i change the color on the hover on the image?

Thanks!

#2

Hi There,

Please try adding this custom CSS under Theme Options > CSS:

a.video-lightbox1:hover {
    opacity: 1;
    background: #283c46;
}
a.video-lightbox1:hover img {
    opacity: 0.5
}

For more information, please take a look at this:

https://www.w3schools.com/css/css_image_transparency.asp

Hope it helps :slight_smile:

#3

I think it layers the black background with opacity on the previous white one, so it becomes grey? Can i remove the white hover effect so the black turns all the way black?

#4

Hi There,

Please update the previous CSS to this:

a.video-lightbox1:hover {
    opacity: 1 !important;
    background: #283c46;
}
a.video-lightbox1:hover img {
    opacity: 0.5
}

Hope it helps :slight_smile:

#5

Worked, thanks!

#6

You’re welcome!

#8

Hey @CoEdam,

If you need anything else we can help you with, don’t hesitate to open another thread.

Best Regards.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.