Using grayscale on column background image hover, but want to exclude button

Support
#1

Hello!

I am using grayscale css on a background image hover in a column, but want to exclude button from this hover effect, so that the button (or anything else on top of the column background image) is not grayed out too.

Here is the code I am using:

.grayscale {
transition: filter 0.45s cubic-bezier(0.3, 0.4, 0.1, 1), opacity 0.45s cubic-bezier(0.3, 0.4, 0.1, 1);
-webkit-filter: grayscale(0%);
filter: brightness(100%);
opacity: 1;
}

.grayscale:hover {
-webkit-filter: grayscale(100%);
filter: brightness(55%);
opacity: 0.80;
}

I did find this relevant conversation (https://theme.co/apex/forum/t/target-column-background-image-css-only/47190/3), but that solution did not work for me.

Thanks in advance!

#2

Hi there,

This might be a different case depending on your setup. I checked your account and you have several licenses. Is there a chance that you can provide us with the URL of the site in question so that we can check?

Thank you.

#3

Sure! I sent it via secure note (I’d rather not publicly post the dev link).

#4

Hi again,

Thank you for providing the URL. I checked your page and I see you’ve added the grayscale class to the whole column so the styles you’ve applied will effect the whole column and any element inside the column cannot be excluded. You’ll need a different approach for example you can change the background image on hover instead, create two sets of image and simply change the background image on hover, for example

.column-one:hover .x-bg div {
   background-image: url("images/hover1.png") !important;
}
.column-two:hover .x-bg div {
   background-image: url("images/hover1.png") !important;
}

In the example above give separate classes to each columns to change the background image on hover.

Hope this helps!

#5

I see your point, it looks like I do need a different approach.

I was able to get the method above working, and it will look much better using two different images for each background. I am wondering if it is possible to have a smoother transition/fade between the image and the image hover. Is that possible with CSS?

Thanks very much for your assistance!

#6

Hello @daneruef,

You can add a transition property into the code:

.column-one:hover .x-bg div {
   background-image: url("images/hover1.png") !important;
   transition: background 0.45s ease;
}
.column-two:hover .x-bg div {
   background-image: url("images/hover1.png") !important;
   transition: background 0.45s ease;
}

For reference:

Hope this helps. Please let us know how it goes.

#7

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