Custom effect no longer working

Custom effect no longer working was created by ClaudioRomeo

Posted 6 years 10 months ago #42184
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;
}
}

Counselor for better people in a better company

Last Edit:6 years 10 months ago by ClaudioRomeo
Last edit: 6 years 10 months ago by ClaudioRomeo. Reason: Attachment not valid

Please Log in or Create an account to join the conversation.

Replied by ced1870 on topic Custom effect no longer working

Posted 6 years 10 months ago #42200
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

Joomlack Webmaster and Developer

by ced1870

Please Log in or Create an account to join the conversation.

Replied by ClaudioRomeo on topic Custom effect no longer working

Posted 6 years 10 months ago #42375
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!

Counselor for better people in a better company

Please Log in or Create an account to join the conversation.

Replied by ced1870 on topic Custom effect no longer working

Posted 6 years 10 months ago #42376
Hi
please clear your browser cache
CEd

Joomlack Webmaster and Developer

by ced1870

Please Log in or Create an account to join the conversation.

Replied by ced1870 on topic Custom effect no longer working

Posted 6 years 10 months ago #42377
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

Joomlack Webmaster and Developer

by ced1870

Please Log in or Create an account to join the conversation.

Replied by ClaudioRomeo on topic Custom effect no longer working

Posted 6 years 10 months ago #42378
AARRGGHHH!
It seems I was made to act as a stupid!
:blink: :oops:
Thank you, Ced...

Counselor for better people in a better company

Please Log in or Create an account to join the conversation.

Time to create page: 0.768 seconds

Fast and powerful creation, customizable and responsive.

Read More

We have 976 guests and no members online