The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Fading div out smoothly

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #42269

    Hey all!

    I have a preloader that preloads a background picture.

    See it here on [CodePen]( “”).

    It sets the div with the id “preload” to .hide when the image has loaded. It works well but I wonder if there is a way to have it fading in and out more smoothly. I put in some fade out values but it only fades a bit and than disappears abruptly.
    Also is there a way to have it show up smoothly rather than it’s directly visible on page load?

    Thanks for any input!


    I couldn’t see actual image loading. The loader was going on continuously.
    Anyways, just use fadeIn() for your image that loads and fadeOut() for loading gif. No need for .hide().

    But just make sure that the position of both image elements are independent of each other. i.e. visibility of one image should not affect position of other since both images will be visible at same time for some time.


    wowo that worked. I took out the .hide and no it’s fading out smoothly!

    but how will i get to fade it in when the page loads? now it’s just there..


    You could either do it with CSS animations, or just run


    once the DOM is ready. (Just at the start of your last `

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.