Custom effect no longer working

Hi.
I achieved a custom Image Effect based on Ming. I called it rose_red.
Until 7 days ago (more or less) it worked fine. Now, it works perfectly on mobile, not on desktop (there are two media queries at the end of the code).
I had inserted the css code into the custom css panel of Template Creator, but now this code seems to be not completely recognized.
If I put this code at the end of imageeffectck.css, it works, but not perfectly (title anyway visible, wrong color and so on).
So, my questions:

• did you changed something to Image Effect CK?
• how can I implement my own effect?
• if I can't put the code in Template Creator, how can I override imageeffectck.css, to avoid overwriting during the updates?

You can find my code at the end of the message.
And finally: I know my questions are not about an Image Effect issue. Nevertheless, any help would be greatly appreciated. Tell me if I need to open a sort of paid ticket.

/*

---

*/
/****** Rose ******/
/* Basato su Ming */
/*

---

*/


/***** Red *****/

figure.effectck-rose_red {
background: #ff0000;
}

figure.effectck-rose_red img {
opacity: 0.9;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}

figure.effectck-rose_red figcaption::before {
position: absolute;
top: 7%;
right: 7%;
bottom: 7%;
left: 7%;
border: none; /* 2px solid #fff; */
box-shadow: 0 0 0 7% rgba(255,255,255,0.2);
content: '';
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale3d(1.4,1.4,1);
transform: scale3d(1.4,1.4,1);
}

figure.effectck-rose_red .imageeffectck_title {
margin: 7% 0 10px 0;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
font-weight: 700 !important;
visibility: hidden;
}

figure.effectck-rose_red .imageeffectck_desc {
padding: 1em;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(1.5);
transform: scale(1.5);
text-transform: none;
}

figure.effectck-rose_red:hover .imageeffectck_title {
-webkit-transform: scale(0.9);
transform: scale(0.9);
border-top: 2px white solid;
border-bottom: 2px white solid;
visibility: visible;
}

figure.effectck-rose_red:hover figcaption::before,
figure.effectck-rose_red:hover .imageeffectck_desc {
opacity: 1;
-webkit-transform: scale3d(1,1,1);
transform: scale3d(1,1,1);
}

figure.effectck-rose_red:hover figcaption {
background-color: rgba(255,0,0,0.4) !important;
}

figure.effectck-rose_red:hover img {
opacity: 0.4;
}

@media screen and (max-width: 480px) {
figure.effectck-rose_red .imageeffectck_title {
font-size: 0.8em !important;
line-height: 0.9em !important;
}

figure.effectck-rose_red:hover .imageeffectck_title {
padding-top: 0.6em;
padding-bottom: 0.6em;
}

figure.effectck-rose_red .imageeffectck_desc {
font-size: 0.6em !important;
line-height: 0.7em !important;
}
}

@media screen and (min-width: 481px) {
figure.effectck-rose_red .imageeffectck_title {
font-size: 1.5em !important;
line-height: 1.6em !important;
}

figure.effectck-rose_red:hover .imageeffectck_title {
padding-top: 1em;
padding-bottom: 1em;
}

figure.effectck-rose_red .imageeffectck_desc {
font-size: 0.8em !important;
line-height: 0.9em !important;
}
}

Hi
first I don't have made any changes and if you don't update yourself, there is no changes at all for sure

now to use a custom effect, you can simply put your code in a CSS (of your template for example). If you apply any css class "effectck-XXX" to your image, the plugin will process it and your css will apply
CEd

Hi, Ced.
There is something going wrong, in my opinion.
I made a simple test.

I made a copy of the Ming section from imageeffectck.css and pasted it into a text editor

Searched and replaced effectck-ming -> effectck-mong

I put the modified section into the Custom CSS panel of Template Creator. Saved and applied.

Modified the class of the image from effectck-ming to effectck-mong. It doesn't work.

You can find it at carbsandprotein.com/ . ANVIL, BRICK and EMBER are effectck-ming and work. SPARKS is effectck-mong and doesn't work.

These images are withing a Page Builder module.

A simple change like this, worked perfectly until two weeks ago: this drives me crazy!

I can't figure out which is the mistake I made!

Hi
please clear your browser cache
CEd

forget my answer ... lol

you have an eror in your custom css on

/* Dimensione immagine prodotto sul mobile */
@media screen and (max-width: 524px) {
.vm-product-container .vm-product-media-container {
width: 100%;
}

it misses the closing bracket

AARRGGHHH!
It seems I was made to act as a stupid!
:blink: :oops:
Thank you, Ced...