How to create an overlay in css?

Question

I would like to create a div with an arbitrary size and then display something on top of that div. What is the best way to place and overlay size exactly the same as the div below in css?

Answer 1

You can use position:absolute to place the overlay inside your div, and then stretch it in all directions:

CSS ^{updated *}

 .overlay { position:absolute; top:0; left:0; right:0; bottom:0; background-color:rgba(0, 0, 0, 0.85); background: url(data:;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuNUmK/OAAAAATSURBVBhXY2RgYNgHxGAAYuwDAA78AjwwRoQYAAAAAElFTkSuQmCC) repeat scroll transparent\9; /* ie fallback png background image */ z-index:9999; color:white; } , iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuNUmK / OAAAAATSURBVBhXY2RgYNgHxGAAYuwDAA78AjwwRoQYAAAAAElFTkSuQmCC) repeat scroll transparent \ .overlay { position:absolute; top:0; left:0; right:0; bottom:0; background-color:rgba(0, 0, 0, 0.85); background: url(data:;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuNUmK/OAAAAATSURBVBhXY2RgYNgHxGAAYuwDAA78AjwwRoQYAAAAAElFTkSuQmCC) repeat scroll transparent\9; /* ie fallback png background image */ z-index:9999; color:white; } 

You just need to make sure your parent div has a position:relative property added to it and a lower z-index .

---

A demo has been made that should work in all browsers, including IE7 +, for the commentator below.

Demo

Removed the opacity property from css and instead uses the rGBA color to give the background, and only the background, opacity level. In this way, the content to which the overlay applies will not be affected. Since IE does not support rGBA, I used IE hack instead to give it a base64 encoded base64 image that fills the overlay div instead, so that we can bypass IE's opacity problem, in which it also applied opacity to children .

Answer 2

http://jsfiddle.net/55LNG/1/

CSS

 #box{ border:1px solid black; position:relative; } #overlay{ position:absolute; top:0px; left:0px; bottom:0px; right:0px; background-color:rgba(255,255,0,0.5); } 

Answer 3

I'm late to the party, but if you want to do this to an arbitrary element using only CSS, without mess with positioning, overlay divs, etc., you can use the insert shadow:

 box-shadow: inset 0px 0px 0 2000px rgba(0,0,0,0.5); 

This will work with any element smaller than 4000 pixels in length or width.

example: http://jsfiddle.net/jTwPc/

Answer 4

The quick answer, without seeing any examples of your current HTML and CSS, should use z-index

CSS

 #div1 { position: relative; z-index: 1; } #div2 { position: relative; z-index: 2; } 

Where div2 is an overlay

Answer 5

I would suggest using css attributes for this. You can use the position: absolute to position an element on top of another.

For example:

 <div id="container"> <div id="on-top">Top!</div> <div id="on-bottom">Bottom!</div> </div> 

and css

 #container {position:relative;} #on-top {position:absolute; z-index:5;} #on-bottom {position:absolute; z-index:4;} 

I would look at this for advice: http://www.w3schools.com/cssref/pr_class_position.asp

And finally, here is jsfiddle to show you my example

http://jsfiddle.net/Wgfw6/

Answer 6

If you don't mind bothering with z-index, but you want to avoid adding an extra div for overlay, you can use the following approach

 /* make sure ::before is positioned relative to .foo */ .foo { position: relative; } /* overlay */ .foo::before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 0; } /* make sure all elements inside .foo placed above overlay element */ .foo > * { z-index: 1; } 

Answer 7

Here is an overlay using a pseudo-element (for example: there is no need to add additional markup for this)

 .box { background: 0 0 url(http://ianfarb.com/wp-content/uploads/2013/10/nicholas-hodag.jpg); width: 300px; height: 200px; } .box:after { content: ""; display: block; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); } 

  <div class="box"></div> 

Answer 8

I just played with a similar problem in the codec, this is what I did to create the overlay using simple css markup. I created a div element with a .box class application. Inside this div, I created two divs, one with the .inner class applied to it and the other with the .notext class applied to it. Both of these classes inside div.box are initially set to display: none, but when .box freezes, they become visible.

 .box{ height:450px; width:450px; border:1px solid black; margin-top:50px; display:inline-block; margin-left:50px; transition: width 2s, height 2s; position:relative; text-align: center; background:url('https://upload.wikimedia.org/wikipedia/commons/c/cd/Panda_Cub_from_Wolong,_Sichuan,_China.JPG'); background-size:cover; background-position:center; } .box:hover{ width:490px; height:490px; } .inner{ border:1px solid red; position:relative; width:100%; height:100%; top:0px; left:0px; display:none; color:white; font-size:xx-large; z-index:10; } .box:hover > .inner{ display:inline-block; } .notext{ height:30px; width:30px; border:1px solid blue; position:absolute; top:0px; left:0px; width:100%; height:100%; display:none; } .box:hover > .notext{ background-color:black; opacity:0.5; display:inline-block; } 

 <div class="box"> <div class="inner"> <p>Panda!</p> </div> <div class="notext"></div> </div> 

Hope this helps! :) Any suggestions are welcome.