overlay css

1#overlay {
2  position: fixed; /* Sit on top of the page content */
3  display: none; /* Hidden by default */
4  width: 100%; /* Full width (cover the whole page) */
5  height: 100%; /* Full height (cover the whole page) */
6  top: 0;
7  left: 0;
8  right: 0;
9  bottom: 0;
10  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
11  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
12  cursor: pointer; /* Add a pointer on hover */
13}

1#element-with-background-image {
2   position: relative;
3   background-image: url("//spin.atomicobject.com/wp-content/uploads/20170324102432/portfolio-tips-feature-image.jpg");
4}
5 
6#color-overlay {
7   position: absolute;
8   top: 0;
9   left: 0;
10   width: 100%;
11   height: 100%;
12   background-color: black;
13   opacity: 0.6;
14}

1.header {
2  background: rgba(0, 0, 0, 0.5); /* Black color with 50% alpha/opacity */
3}

1box-shadow: inset 0 0 0 2000px rgb(0 0 0 / 67%);

1#hero{
2  background-image:url();
3  background-size:cover;
4  background-position:top center;
5  position:relative;
6}
7
8#hero::after{
9  content:'';
10  position:absolute;
11  left:0;
12  top:0;
13  height:100%;
14  width:100%;
15  background-color:black;
16  opacity:0.7;
17}

1/* To solve overflow issue in IE,
2always use properties separately,
3do not use short hand */
4
5div {
6  overflow-x: hidden;
7  overflow-y: auto;
8}