CODEWITHSUNDEEP
htmlcss
Pieter Bos
Pieter Bos

Reputation: 1574

How can one create an overlay in css?

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?

Upvotes: 69

Views: 152621

Answers (9)

Daniel Hunter
Daniel Hunter

Reputation: 2916

A 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.

Upvotes: 0

Undefined
Undefined

Reputation: 11429

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.

And finally, here is a JSFiddle to show you my example.

Upvotes: 1

vishal
vishal

Reputation: 121

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);
}

Upvotes: 1

Abhishek Singh
Abhishek Singh

Reputation: 27

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. 

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

Upvotes: 0

Dorian
Dorian

Reputation: 24009

Here is an overlay using a pseudo-element (eg: no need to add more markup to do it)

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

Upvotes: 3

pronebird
pronebird

Reputation: 12260

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 > * { z-index: 1; }

Upvotes: 1

user1002973
user1002973

Reputation: 2100

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/

Upvotes: 15

Andres I Perez
Andres I Perez

Reputation: 75409

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.

Upvotes: 118

Alex
Alex

Reputation: 6406

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);
}

Upvotes: 10

Related Questions