Tansform filters applied to an image

General
1

I want to transform the color on hover.
The class of the image is image-cc71955

Using css
I add this css code:

.image-cc71955:hover {
filter: invert(97%) sepia(6%) saturate(596%) hue-rotate(122deg) brightness(92%) contrast(87%);
}

The css in source page is:

.image-cc71955:hover {
filter : invert(97%) sepia(6%) saturate(577%) hue-rotate(122deg) brightness(92%) contrast(87%)
}

→ everything runs fine

Using Cwicly settings

2023-05-12_154840
2023-05-12_154840281×730 17.4 KB

The css in source page is:

.image-cc71955:hover {
filter : brightness(92)contrast(87%)hue-rotate(122deg)invert(97%)saturate(577%)sepia(6%)
}

→ Issue: the “%” of brightness is not set so the filter doesn’ work as expected

Environment info

  • WordPress version: 6.2
  • Gutenberg Plugin version: -
  • Cwicly Plugin version: 1.2.9.5.8.4
  • Cwicly Theme version: 1.0.3
2

That’s not a bug @weedor. Wouldn’t even consider that as an inconsistency.
As you can see, the slider range goes from 0 to 3 (in decimal increments), so it suggests to the user that a unitless value is applied.

For example, 2 is equal to 200%. You can find more info here.

3

Checking where the issue comes from!

4

Thank you @Marius
I changed according to your reply.
The issue goes on.

Here is the code created by Cwicly:
brightness(.92)contrast(87%)hue-rotate(122deg)invert(97%)saturate(577%)sepia(6%)
→ doesn’t work

I changed the order of parameters
I moved “invert” and “sepia” to the beginning of the line.
Here is the new order:
invert(97%)sepia(6%)brightness(.92)contrast(87%)hue-rotate(122deg)saturate(577%)
→ does work fine

Do you know if exist a solution to reorder parameters?

5

So what’s exactly not working on your side if I might ask?

Did test earlier, didn’t run into any issues but didn’t replicate your example 1:1.

The order shouldn’t affect anything. Could it be that some values are interfering (not technically but in a visual way)?

6

@Marius

Normally, the color to reach must be #C4DFDB
With the filter Cwicly code, the color is #EDEBE7
With the filter code reordered, the color is #C4DFDB

You can check it at https://bros.ai/ at the very bottom (on the right).
There is a “big” image “bros.ai”
On hover, the color is #EDEBE7
If you reorder the filter according to my previous post, on hover, the color becomes #C4DFDB

7

You are right @weedor.
The order of the values does matter and affects the end result.

So when adding multiple values, it’s out of users’ hand (unless I miss something).
Might be worth a feature request to drag/order the values imo.

1 Like
8

Thank you @Marius
I will create the request

1 Like
9

Hi @weedor,

While I understand that you’re trying to apply the filters in a different order to achieve a specific result, this behaviour cannot be considered a bug as the filters are applying correctly, albeit not in the order you specifically require.

However this sounds like a nice feature request.

Thank you as always for helping out, @Marius!

2 Likes
10

@Araminta
You are right, this can’t be considered as ²a bug. This is why I created a Feature Request.
As usually, @Marius is helpful precious.
Thank you both.

2 Likes