Change Filterable Gallery Hover Opacity

@giovannagiacon

Of course. You should be able to change the opacity fairly easily ?? IIRC there should already be a setting in the options to change it.

For clarity are you referring to the hover items or the picture itself? Also, which hover setting are you using? I’m not 100% sure if they use different classes or not.

For CSS. Grab the selector then add an opacity & background property to it.

Example:

.gallery-item-caption-wrap.caption-style-hoverer,
.gallery-item-caption-wrap .gallery-item-hoverer-bg {
    opacity: 1;
    background: #000
}

Example Screenshot

Hello!

Can’t find it in the options for the life of me ??

The hover items, like in the example you sent! It’s the overlay layout, slide in up hover style. Full image clickable, action link.

Now, here’s the thinggg. I had messed with the plugin css before coming here and I did find out how to get the color solid BUTTT it starts lagging? then I thought oh I did something wrong and got it back to the way it was before…

But with your css, same thing. It’s easier if you see it for yourself…

https://giovannagiacon.com.br/

Now I notice what’s happening is, the smooth transition effect, that works with the image quickly going full opacity (?), goes away too D: any way to get both to work at the same time?

Thank youuu

@giovannagiacon

Hi again^^

It looks like you’re using the same style that I am using. To make this as simple as possible. Please remove any/all custom CSS you have for this. Including what I gave.

Then navigate to the EA Filterable Gallery > Style > Item Hover Color > Background Color. Screenshot here.

So, this should be pretty easy to do. I’ll set it on my site for example so you can see it in action. Using your preferred colour. My website with example is here.

This CSS is specific to your site at the time that I checked it. But could change so double check just in case.

.elementor-29 .elementor-element.elementor-element-615604c .gallery-item-caption-wrap .gallery-item-hoverer-bg {
     opacity: 1
}

and that’s all it. Looking at your site, there shouldn’t be any conflicts if you do these 2 steps. After removing anything you have previously done, of course.

Hope that helps ??

It worked perfectly!!! thank you a LOT it’s exactly how I envisioned it!!! ?? <3

Great! Glad its all working now ??