How can one create an overlay in css

Question

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

User · Answer

I would suggest using css attributes to do this. You can use 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 take a look at this for advice: http://www.w3schools.com/cssref/pr_class_position.asp

And finally here is a jsfiddle to show you my example

http://jsfiddle.net/Wgfw6/

User · Answer

You can use position absolute to position an overlay inside of your div and then stretch it in all directions like so   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      You just need to make sure that your parent div has the position relative property added to it and a lower z-index     Made a demo that should work in all browsers  including IE7   for a commenter below   Demo  Removed the opacity property from the css and instead used an rGBA color to give the background  and only the background  an opacity level  This way the content that the overlay carries will not be affected  Since IE does not support rGBA i used an IE hack instead to give it an base64 encoded PNG background image that fills the overlay div instead  this way we can evade IEs opacity issue where it applies the opacity to the children elements as well

User · Answer

I m late to the party  but if you want to do this to an arbitrary element using only CSS  without messing around with positioning  overlay divs etc   you can use an inset box shadow   box-shadow  inset 0px 0px 0 2000px rgba 0 0 0 0 5     This will work on any element smaller than 4000 pixels long or wide   example  http   jsfiddle net jTwPc

User · Answer

Here is an overlay using a pseudo-element  eg  no need to add more markup to do it    x000D   x000D   box   x000D    background  0 0 url http   ianfarb com wp-content uploads 2013 10 nicholas-hodag jpg   x000D    width  300px  x000D    height  200px  x000D    x000D   x000D   box after   x000D    content      x000D    display  block  x000D    width  100   x000D    height  100   x000D    background  rgba 0  0  0  0 4   x000D    x000D     lt div class  box  gt  lt  div gt  x000D   x000D   x000D

User · Answer

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

User · Answer

Quick answer without seeing examples of your current HTML and CSS is to use z-index  css    div1   position  relative  z-index  1      div2   position  relative  z-index  2      Where div2 is the overlay

User · Answer

I was just playing around with a similar problem on codepen  this is what I did to create an overlay using a simple css markup  I created a div element with class  box applied to it  Inside this div I created two divs  one with  inner class applied to it and the other with  notext class applied to it  Both of these classes inside the  box div are initially set to display none but when the  box is hovered over  these are made visible     x000D   x000D   box  x000D    height 450px  x000D    width 450px  x000D    border 1px solid black  x000D    margin-top 50px  x000D    display inline-block  x000D    margin-left 50px  x000D    transition  width 2s  height 2s  x000D    position relative  x000D    text-align  center  x000D      background url  https   upload wikimedia org wikipedia commons c cd Panda Cub from Wolong  Sichuan  China JPG    x000D    background-size cover  x000D    background-position center  x000D     x000D    x000D   box hover  x000D    width 490px  x000D    height 490px  x000D    x000D   inner  x000D    border 1px solid red  x000D    position relative  x000D    width 100   x000D    height 100   x000D    top 0px  x000D    left 0px  x000D    display none   x000D    color white  x000D    font-size xx-large  x000D    z-index 10  x000D    x000D   box hover  gt   inner  x000D    display inline-block  x000D    x000D   notext  x000D    height 30px  x000D    width 30px  x000D    border 1px solid blue  x000D    position absolute  x000D    top 0px  x000D    left 0px  x000D    width 100   x000D    height 100   x000D    display none  x000D    x000D   box hover  gt   notext  x000D    background-color black  x000D    opacity 0 5  x000D    display inline-block  x000D    x000D   lt div class  box  gt  x000D     lt div class  inner  gt  x000D       lt p gt Panda  lt  p gt  x000D     lt  div gt  x000D     lt div class  notext  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Hope this helps     Any suggestions are welcome

User · Answer

If you don t mind messing with z-index  but you want to avoid adding 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  gt      z-index  1

User · Answer

div           background-image url               background-size cover           background-position top center           position relative                       div before           content              position absolute           left 0           top 0           height 100            width 100            background-color rgba 0 0 0 0 7

[html] How can one create an overlay in css?

Examples related to html

Examples related to css