Custom effect no longer working
- ClaudioRomeo
- Offline Topic Author
- Platinum Member
- Posts: 363
- Thanks: 12
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:
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;
}
}
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?
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.
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
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.
- ClaudioRomeo
- Offline Topic Author
- Platinum Member
- Posts: 363
- Thanks: 12
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!
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
by ClaudioRomeo
Please Log in or Create an account to join the conversation.
Please Log in or Create an account to join the conversation.
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
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.
- ClaudioRomeo
- Offline Topic Author
- Platinum Member
- Posts: 363
- Thanks: 12
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...
It seems I was made to act as a stupid!
:blink: :oops:
Thank you, Ced...
Counselor for better people in a better company
by ClaudioRomeo
Please Log in or Create an account to join the conversation.
Time to create page: 0.768 seconds