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 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_

.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 > .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 > .notext{_x000D_
  background-color:black;_x000D_
  opacity:0.5;_x000D_
  display:inline-block;_x000D_
}

_x000D_

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

_x000D_

Hope this helps! :) Any suggestions are welcome.

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

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

I would suggest using css attributes to do this  You can use position absolute to position an element on top of another   For example    lt div id  container  gt      lt div id  on-top  gt Top  lt  div gt      lt div id  on-bottom  gt Bottom  lt  div gt   lt  div gt    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

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

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

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

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

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

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

Examples related to html

Examples related to css