Overlay congrats GIF (whole screen)

Ask for Help
1

Hello fellow Gliders :slight_smile:

Anyone managed to overlay an image with transparent background?

I would like a "congratulations " gif, with confetti falling … filling the whole screen.

I didn’t find the code to do it :confused:
(not even in the code book)

Have a nice day

Martin

1 Like
2

there is one in the Code BOOK, check the Holiday Background CSS :wink:
Just replace the image URL with the one you like.

here just paste this… add a timer or off button:

<div class="snow"  target="_blank">
<img src="https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/9eu1P0fXDpI9SXega1Co/pub/FchC0tKtCj8zaqyKbas4.gif">
</div>

<pre><span><style>
    body{ margin: 0; padding: 0; }
    .snow { width: 100% ;
    height:100% ;
    position: fixed ;
    top:0;
    left:0%;
    opacity: 0.3;
    z-index:1;
    pointer-events: none;
    }
    .snow img { width: 100% ;
    height:100% ;
    object-fit: cover ;
    }
3 Likes
3

In Glide Pages, I create an if-then-else column that outputs either a white background or a confetti background based on whether the congrats should display. Then, I add the if-then-else image as a background to an image container. Not exactly what you’re looking for, but it has a nice effect.
CleanShot 2023-01-06 at 15.08.53

9 Likes
4

Great trick!

1 Like
5

Thank you guys!

blessed… Three elite team members answering my post :wink: :stuck_out_tongue_winking_eye:

Have a nice day

6

And beautiful indeed… @Robert_Petitto

I was looking to have it on the foreground… above all elements… but that will do :pray:
(perfectionism is truly a threat at early stage.)

Its funny to see that by using no code, i know now a bunch of javascript stuff ><

1 Like
7

You’re not kidding. Learning Glide (a no code tool) advanced my skillset in:

  • HTML
  • Markdown
  • CSS
  • Javascript
  • REST API
  • JSON Transformation
  • JQ Query

Craziness.

2 Likes
8

Haha, this is basically my experience.

1 Like