Hello all,
Result in preview and on the server differ.
I have created a new class for Image Overlay and in both Blocs and Browser show me the same result. As soon as the files land on the server, the browser shows as if the class does not work at all. Attached are two screenshots - one from preview, other on the server.
Why is it like this?
Thanks for help.
Based on the 4 browsers I tested it on, your implantation seems to have cross browser issues (I got different results)
What did you use as a guide?
What do you mean by that, I didn’t quite understand. All my browsers - Safari, Edge, Chrome, Firefox, Opera - show the same result, both in Preview and from the server online. Here is the link to the test server: www.autocon-premium.de
Thank you for your help!
This is what I get, (I am assuming there is supposed to be a tinted overlay on the back). The back elements disappear on Safari.
Safari
Chrome / Brave / Edge (the same)
Anyway, I had an issue with flipping cards and back content, I eventually resolved it, the thread is here.
and this is what it looks like in Blocs. This is how it should be.
@akula I had a look at the CSS you were using.
Try adding the following CSS, to ensure the front opacity goes to 0 on flip.
/* Set opacity to 0 during flip */
.overlay-3d-container:hover .overlay-flip-y img,
.overlay-flip-y .img-overlay-container,
.overlay-3d-container:hover .overlay-flip-x img,
.overlay-flip-x .img-overlay-container {
opacity: 0;
}Adding this via the Browser Inspector, I get the result you want…
Silly question: I tried to create an extra CSS with this code, nothing happened, or should it have certain names? Should I insert the code into an existing CSS? There are two: bootstrap.min.css & animate.min.css. I am not a code man ;-))
Using the code editor copy and paste it to the css input zone.
How did you add this originally?
I have created SCC file named Menu.css with the code and uploaded it to folder “css”.
Was that wrong?
Ah, there is also a style.scc in the root directory, should I paste it into this file?
You just uploaded it? That won’t work.
If the page doesn’t know it’s there it won’t use it.
Use Blocs.
Using the additional CSS input zone, blocs will add it to the main style sheet and it’s one less file your page needs to access.
Code editor info is available here. You want to use the additional CSS input zone
https://help.blocsapp.com/knowledge-base/code-editor/#code-input-zones
It worked, thank you very much!
Should I rather use the code whenever I edit image-overay with custom class?
Was this the Image overlay bric you used? I’m not on my Mac.
I didn’t fully look into what you had done.
Yes, I have used image overlay-bric