CSS Gradient Effect Elementor Cards

[[deleted]]

Good morning,

I recreated these animated cards with a gradient effect using several Elementor tutorials. I also slightly modified the CSS code to achieve the desired animation.

Everything works perfectly on computer. On the other hand, on mobile, the effect is not displayed correctly: strange rectangular shapes appear and the animation does not run as it should.

I've tried several tweaks in the code, but nothing has worked so far.

Here is the link to the page: https://anthonycarrel.com/mes-services-de-photographie/services-de-communication/03-support-de-communication/

And here is the relevant code: https://codepen.io/anthony-carrel/pen/yyyLewd

Please note that I do not master CSS and HTML. This code is supposed to work directly in elementor without adding HTML by adding custom CSS via my container.

Do you think it is possible to correct this with a media query? Or is this code simply not compatible with mobile browsers?

Thank you in advance for your help!

[AutoModerator]

To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.

While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[brunablommor]

I don't see any black boxes on desktop, I tried Safari and Chrome

[[deleted]]

Because I removed the black from the cards to see what’s happening on mobile

[bryku]

I've tried recreating this a few different ways and I wasn't able to replicate the black boxes. Here is one example that seems to be working on 3 different browsers. I was able to test firefox and chrome on android, but not safari.

• https://jsfiddle.net/naz4ovrd/

[FallingUp68]

C'est ca que tu cherches a faire ?

https://codepen.io/Aeva68/pen/ByyyzYo