• Wednesday , 3 June 2020

Web Page Overlay Tutorial Reloaded CSS Javascript Transparent Cover

Code Canyon

Code: http://www.developphp.com/video/JavaScript/Web-Page-Overlay-Tutorial-Transparent-Cover
Both overlay methods are shown in this video. Opacity and transparent graphics.

Original source

3d Ocean

Related Posts


  1. Zakaria Jaouad
    May 24, 2019 at 06:11

    Good video, can't wait to implement this in my php page.

  2. henry Brooks
    May 24, 2019 at 06:11

    Thanks man

  3. Benjaman Woolner
    May 24, 2019 at 06:11

    Another great tutorial video, but I'm having some issues with my implementation. How can I add the div's for the overlay and special box into a pre-existing layout without the divs forcing all the other content down. On my site I'm trying to use this system as a login box, but every time the box opens it pushes my main page content down.

  4. rdw3ut
    May 24, 2019 at 06:11

    Is having an overlay the same thing as saying pop-up box?

  5. David Regalado
    May 24, 2019 at 06:11

    Good bless you Adam. 

  6. Igal
    May 24, 2019 at 06:11

    You can also use the CSS alpha value for opacity: background-color:rgba(0,0,0,0.7); where 0.7 is the alpha value and the rest are the RGB values. Saves the use of JS.

  7. Amgad Mohamadadel
    May 24, 2019 at 06:11

    thanks sir for this winderfull lesson

  8. Amit Chawhan
    May 24, 2019 at 06:11

    transition property is not working on speicalBox div ??

  9. david merrill
    May 24, 2019 at 06:11

    great tut Adam can you show us how we can have multiple box`s fly out on the one page I want to use this but have about ten different box`s I want to have content in
    I have used getElementByClass but ime a dumb ass can`t get it to work
    can you help plz

  10. Kishore Kumar
    May 24, 2019 at 06:11

    HI Adam,
    I love all your videos. It was very helpful for me when i meet some problems in programming. I need one help from you. Can u make a tutorial on AutoGrow Textarea using pure JS (no jquery involved) and it should not have an option to resize with mouse. Only time it should grow is when typed and when text is deleted it should shrink to its original position accordingly. Please make a tutorial on this. It will be helpful for everyone who is looking for this.

    Thank You

  11. antorower
    May 24, 2019 at 06:11

    Thx bro!!!!!!!!!!!!!!!!!!!!!!!
    Simple perfect!

  12. Eric Smith
    May 24, 2019 at 06:11


    Thank you again for your clear easy to understand tutorial. I really appreciate all your efforts in helping us.


  13. dawgp0und
    May 24, 2019 at 06:11

    There is really no difference except the latter is faster for css rendering. I hope that helps. check my javascript tutorials. Just my 2cents!

  14. r3s3tme
    May 24, 2019 at 06:11

    Why do u use div#overlay and not #overlay only?

  15. Waranle
    May 24, 2019 at 06:11

    You are the best Adam 🙂

Leave A Comment

You must be logged in to post a comment.