CSS rgba background color loading before opacity

Question

I have an image taking up the whole viewport. Over top of it is a div, also taking up the whole viewport. The div has background: rgba(0,0,0,.5); to make the image behind it look darker. It works great, except that when the page is loading, the whole screen is covered with gray before opacity is applied and I can see the image underneath.

Is there any way to make the image and the div (with opacity applied) appear at the same time? I don't want to see the big block of gray while the page is loading.

Answer 1

This should do it for you https://jsfiddle.net/c259LrpL/26/

This will wait till images are loaded then make the img and the div visible at the same time... I think

<img id="img1" src="http://lorempixel.com/1200/1200/sports/1/"  style="visibility: hidden" >
<div id="over" style="visibility: hidden" > 

</div>
<script>
  $(window).on("load", function() {
    $("#img1").css("visibility", "visible");
    $("#over").css("visibility", "visible");
  }); 
</script> 

Answer 2

Consider this idea. We'll use the :after pseudoclass of the <img> container's background property (the <figure> in my example) to control the darkening. When the page is fully loaded, we add a .loaded class to the body . This does 2 things simultaneously:

1. Transition the opacity from 0 to 1 on the <figure>
2. Transition the semi-opaque background from (0, 0, 0, 0.5) to transparent

 window.onload = init; function init() { document.body.classList.add("loaded"); } 

 body, figure{ margin: 0; } figure { position: fixed; width: 100vw; height: 100vh; opacity: 0; transition: 2s opacity; } img { width: 100vw; } figure:after { transition: 2s background; background: transparent; content: ''; display: block; height: 100%; width: 100%; top: 0; left: 0; position: absolute; } .loaded figure:after { background: rgba(0, 0, 0, 0.5); } .loaded figure { opacity: 1; } 

 <figure> <img src="https://images.unsplash.com/photo-1432637194732-34cedd856522?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=a135be75b0fa480c18b22b5e557f56b3" alt=""> </figure> 

http://codepen.io/antibland/pen/EKrVKr

Answer 3

Well, you can wait until the browser is done loading all images and then slowly change the opacity, like a fade-in effect. Here's a preview:

 var imageElement = document.getElementById('image'); var overlayElement = document.getElementById('overlay'); window.addEventListener("load", function() { imageElement.style.opacity = "1"; overlayElement.style.opacity = "1"; }, false); 

 body { position: relative; } #image, #overlay { width: 1000px; height: 800px; position: absolute; top: 0; left: 0; opacity: 0; transition: all 2s ease-in-out; -webkit-transition: all 2s ease-in-out; } #overlay { background: rgba(0, 0, 0, 0.5); } 

 <img id="image" src="https://upload.wikimedia.org/wikipedia/commons/3/3d/LARGE_elevation.jpg"> <div id="overlay"></div> 

It's plain javascript. I know the tag only said css, but what you want is not possible with css only. I quickly created an overlay effect, don't mind the css except for: opacity: 0; and transition: all 2s ease-in-out; -webkit-transition: all 2s ease-in-out transition: all 2s ease-in-out; -webkit-transition: all 2s ease-in-out for the fade-in effect.

The javascript works like this: I create 2 variables which get the elements from the DOM. The image has an ID image and the overlay has an ID overlay . Next we set an eventlistener to our window. When the window is completely loaded, it should execute everything in the function. The opacities of both the image and overlay are set to 1 (visible). With our css property transition we manage the fade-in effect.