Carousel (pro gallery) button hover states - not working

[Mad_River]

I’m having trouble with
Setting hover states on the buttons within carousels (pro gallery)

Working in
Wix Studio

What I’m trying to do
I would like to set a hover state on buttons within carousels (pro gallery). But it doesn’t seem to let me, not sure if this is a bug. There seems to be a subtle automatic hover state applied, but I’m not sure how to change this.

What I’ve tried so far
I have been able to set hover states/overlays on the images within the carousels but not the buttons.

Can anyone suggest a way to do this please?

[Rob]

Currently, the buttons within the Pro Gallery are meant to be call-to-actions as clicking on the item is what triggers your action to run (if you want to open in expand mode , send to a link as set within the manage media, or open in full screen). You can customize the button design but there isn’t a hover state.

There is a feature request though that you can vote on here if you want to make only the button clickable as that should then also add a hover state option.

[Mad_River]

Hello, thank you for your reply.
Here is a link to a test site https://digitalmadriver.wixstudio.com/my-site-3/media?rc=test-site the second pro gallery on this page (see screenshot) has got a hover state for the button, so I was a little confused how it’s got this state. I was hoping that it would be possible to add a hover state like this to the other pro gallery higher up on this page.

I have voted for the feature

Many thanks

[Rob]

Thanks for the link as I see why I didn’t see a hover state on my end (I had the text over the image, not underneath). However, I did see the button there does add a slight hover but it can’t be customized.

I did a video a while back that you could try if you feel comfortable with CSS, you can try this with .gallery-section in my case being what I used for my section with the gallery.

.gallery-section [data-hook=“custom-button-button”]:hover,
.gallery-section [data-hook=“custom-button-button”] .button__label:hover{
background-color: coral !important;
color: purple !important;
}

It could probably use some optimizing and you can customize the colors as you see fit but I hope this can help.

[Mad_River]

Thanks for your reply.
I tried the code but it didn’t work unfortunately.

I also tried this code below in the global css, which worked how I wanted, but then after 10 minutes it stopped working, even though I hadn’t touched the code since.

.gallery-section [data-hook=“custom-button-button”]:hover {
background-color: #EFEDE6 !important;
color: #363434 !important;
}

.gallery-section [data-hook=“custom-button-button”]:hover .button__label {
color: #363434 !important;
}

Do you know why this is?
Thanks

[Mad_River]

I have managed to get this code to work!

.section {
[data-hook=“custom-button-button”]:hover {
background-color: #EFEDE6 !important;
color: #363434 !important;
}

.gallery-section [data-hook=“custom-button-button”]:hover .button__label {
color: #363434 !important;
}
}

How do I target only one carousel on the page with this?
I have tried adding the display ID in replace for .section but it didn’t work.

Are you able to help me with this please?

[Rob]

You could place the Pro Gallery inside a container (or a cell) and give the custom class to that container if you only want to target one of the galleries (in an instance where you have two galleries in the same section).

Below is an example to show in which I put two galleries in different cells and gave the cells custom classes.

[Mad_River]

Thank you, this has worked!