Transparent DIVs and content

  • 2
  • Idea
  • Updated 2 years ago
  • (Edited)
Boredom is a great thing! While at it I dugout this simple HTML trick:

It allows to apply transparency to DIVs (this is what Placeholders are called within RV HTML code) and their content: images, text, videos etc. This is actually awesome little trick. Basic preview here:

p.s. I thought transparent videos can be so cool
Photo of Darius -

Darius -, Champion

  • 26,850 Points 20k badge 2x thumb

Posted 2 years ago

  • 2
Photo of HSuarez


  • 11,896 Points 10k badge 2x thumb
Epic! Thanks for sharing.

Would be great to see what anyone else can come up with for transparent divs.
Photo of Peter Cameron

Peter Cameron, Employee

  • 1,418 Points 1k badge 2x thumb
Very cool. Could make some interesting Pokemon Go style effects with this :)
Photo of Tom De Vos

Tom De Vos

  • 502 Points 500 badge 2x thumb
Hi Darius,

I'm interested in how to make a transparant video with alpha channel work in a presentation.
For ex. it would be nice to have flying hearts on valentine's day over the entire presentation on that day.
Could you walk me trough in how to make this work ? 
I'm not actually a programmer but I'll do my best.

Thanks !

Photo of Darius -

Darius -, Champion

  • 26,850 Points 20k badge 2x thumb
I am not a programmer either))) Do you have a video already? With the video it is simple: create the placeholder the size you want it and place where you need it. Insert your video using the video widget. If you need it more transparent, then go to HTML view, scroll to the top and add <style> bracket between the <head> brackets. Now, between <style> brackets assign opacity property to your placeholder as in here: Instead of 'div' use your placeholders name with # sign in fron of it: #yourplaceholder.

Now I recommend doing the following. Instead of using video you can use some simple HTML 'magic.' Just before holydays I posted this:

Based on that I made this:

What you need to do is to create a placeholder, insert the HTML Widget and replace whatever code is in the with the code from this file [download]

I used dingbat type font face (it is using little cliparts for letters) to make falling hearts:

You can use different letter for different style heart (I left some notes in the file; in the link above you can see which letter is which heart style). You can also download different dingbat with different hearts if you want, just upload that file to your storage and update the link in the HTML widget.

I hope it helps.