I have an HTML/CSS pure layout and I'm using flexbox. I am developing a simple hamburger overlay menu sort of thing, but the overlay isn't fully covering the entire site -- there is no higher z-index present.
If I change the opacity to 0, the entire page goes white.
Desired Output:
Div that covers the entire page
Current Output (See Below):
HTML
<body data-theme="light" class="overlay">
...
</body>
CSS
.overlay {
opacity: 1;
background: #000;
width: 100%;
height: 100%;
z-index: 10;
top: 0;
left: 0;
position: fixed;
}
Output
You can't make the HTML body an overlay because it is the main container for the whole page, so it contains the elements you are trying to overlay.
Instead you can create a separate div for the overlay. This shouldn't have any content (unless you want content in your overlay of course). Then you can add your existing overlay class to it:
.overlay {
opacity: 0.5;
background: #000;
width: 100%;
height: 100%;
z-index: 10;
top: 0;
left: 0;
position: fixed;
}
h1, p { color: red;}
<body data-theme="light">
<div class="overlay"></div>
<h1>Hello</h1>
</body>
First you may add
.FlexContainer{position: relative;}
Next a few changes for the Overlay:
.FlexContainer .Overlay {
position: absolute;
top: 0;
left: 0;
margin: 0;
border: none;
width: 100%;
height: 100%;
background-color: rgba(013, 130, 230, 0.5);
cursor: not-allowed;
}
Related
Just saw something for the first time with opacity versus rgba and trying to confirm if/why the two don't mix well as it appears.
Basic example:
I've got a fullscreen div with a background image. That div has a dark overlay using an :after pseudo with a dark hex background-color and opacity.
I then have an absolutely positioned, light-colored heading on top using z-index and rgba.
When I do it with the mixed hex BG and rgba heading, the heading looks like a solid grey - as if the heading is transparent, but that the dark :after pseudo element loses its transparency where the heading is.
By changing the heading to hex and opacity, rather than rgba, everything's transparent exactly as the design was going for.
Can anyone explain why mixing the two is causing trouble? I'm having a hard time finding the right Google/Stack search to get a clear answer.
Abridged version of the HTML
<section id="banner">
<div class="inner">
Some content
</div>
<h2 class="transparent">The heading in question</h2>
</section>
The abridged CSS:
#banner {
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-image: url('pathto/image.jpg');
background-size: cover;
}
#banner:after {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #000;
opacity: 0.35;
}
#banner .inner {
z-index: 2;
}
.transparent {
z-index: 2;
position: absolute;
bottom: 0;
right: 0;
color: rgba(255,255,255,.5);
}
Try this approach...
#banner {
position:absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Pigeon_Point_Lighthouse_%282016%29.jpg/220px-Pigeon_Point_Lighthouse_%282016%29.jpg');
background-size: cover;
}
#banner:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0,0,0,0.55);
}
#banner .inner {
z-index: 2;
}
.transparent {
z-index: 2;
position: absolute;
bottom: 0;
right: 0;
font-size: 53px;
color: rgba(255,255,255,.25);
}
<section id="banner">
<div class="inner">
Some content
</div>
<h2 class="transparent">The heading in question</h2>
</section>
I want to create a tutorial feature for my user on my website. I'm planning to create a dark overlay layer on the whole screen, and on a specific area, the background is completely transparent, so the user understand the area which the tutorial is talking about.
Here what I have done :
<body>
<div>
<p>THIS IS CONTENT</p>
</div>
<div class="overlay">
<div></div>
</div>
</body>
on CSS :
.overlay {
background: rgba(0, 0, 0, 0.5);
position: fixed;
top:0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
}
.overlay > div {
background: rgba(0, 0, 0, 0);
width: 100%;
position: absolute;
height: 30px;
top:0;
left: 0;
}
the div inside .overlay has no effect since the background of the div is ON TOP of the .overlay
What I think prevents your content div from being displayed under the overlay is that you haven't specified a z-index for that. If you specify one for the larger container div like so: <div id="cont"> and give it a z-index smaller than that of the overlay (<9999) perhaps your problem will be solved.
UPDATE: I've read through your question again, and to solve your actual problem, you should make specific content and background div-s inside the master overlay container. It also seems to be important to add position: absolute; to the content div of the overlay.
UPDATE 2: To make the #cont stay visible as the overlay shows up, just add a greater z-index for that div than the one used by the overlay, and add a position: absolute; to it to make it specific.
Below is a working snippet.
#cont {
position: absolute;
z-index: 9999;
color: blue;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9990;
}
#overlay-cont {
color: red;
position: absolute;
top :40px;
left: 50px;
z-index: 9990;
display: block;
}
#overlay-bg {
background: rgba(0, 0, 0, 0.5);
height: 100%;
Width: 100%;
position: fixed;
top: 0px;
left: 0px;
z-index: 9980;
}
<body>
<div id="cont">
<p>THIS IS CONTENT</p>
</div>
<div class="overlay">
<div id="overlay-cont">The overlay content goes here.</div>
<div id="overlay-bg"></div>
</div>
</body>
I would like to show the image with a non glassy display. Similar to the following one,
I am using the image as it is. I would like to show that with matte finish.
normal image:
Matte finish:
I am not able find it online. May be I am not using the right search keywords. Could anyone help me with this?
Inside a container I did put an image with reduced contrast / brightness / saturation plus a little bit of blur (all these four effects made by CSS filter). The image could've be placed as the container background but I wanted to apply these filters so it went separated.
After it, there's a colored layer with transparency covering the whole area. The letter represents the page's content that can be anything.
UPDATE: multiple filters must be all in a row, like it is on this latest update:
body {
width: 100%;
height: 100vh;
margin: 0px;
font-family: Georgia, serif;
}
#container {
width: 100%;
height: 100%;
position: relative;
background-color: navy;
overflow: hidden;
}
#thepic {
width: 100vw;
height: 100vh;
object-fit: cover;
-webkit-filter: brightness(90%) contrast(90%) blur(2px) grayscale(10%);
filter: brightness(90%) contrast(90%) blur(2px) grayscale(10%);
}
#color_layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: navy;
opacity: 0.3;
}
#content {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
margin: auto;
text-align: center;
}
h1 {
display: inline-block;
color: white;
text-shadow: 1px 2px 2px #000;
font-size: 4em;
font-weight: 100;
letter-spacing: 2px;
text-align: center;
vertical-align: middle;
}
#letter {
vertical-align: middle;
}
<div id=container>
<img id=thepic src="http://i.imgur.com/s9J4MnI.jpg">
<div id=color_layer></div>
<span id=content><img id=letter src="http://i.imgur.com/CB1vUqy.png" alt=img><h1> 書面</h1></span>
</div>
#freestock.tk - That's the idea I had in mind also.
Here's another way to do it with less markup:
img {
max-width: 100%;
height: auto;
}
.container {
position: relative;
z-index: -1;
}
.container:before {
content: "";
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
}
<div>
<h1>Original Image</h1>
<img src="http://i.imgur.com/WjbwTUH.jpg">
</div>
<div class="container" id="content">
<h1> With Transparent Overlay </h1>
<img src="http://i.imgur.com/WjbwTUH.jpg">
</div>
In this example, I put the image inside a container that is relatively positioned. The z-index is -1 so it will be behind the next layer.
Then I used a pseudo element that is absolutely positioned so it will stretch across the whole width of the container and cover the image. The positive z-index sets it on top of the first layer. Rather than setting an opacity, I used an rgba value for the background color. The first three numbers or the red, green, and blue values as usual, but the last number is a decimal between 0 and 1 that sets the opacity level. I made it a little darker than you probably want just so you can see the difference. You may also choose a different color to fit your image.
For reference: http://nicolasgallagher.com/css-background-image-hacks/
I have a footer which is purple, but then also have an overlay image for the footer which I am showing using a ::after selector:
footer::after {
content: "";
background: url(/wp-content/themes/atheme/images/footermask.png);
opacity: 0.1;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: 100;
}
I have the usual links and social items in the footer, but the ::after mask is causing them to not be clickable. As a work around I positioned the elements absolutely and gave them a higher z index but its causing other issues with position and I feel its not the right way to go about it.
How can these elements NOT be absolutely positioned, yet still come above the overlay ::after mask?
Example here: https://jsfiddle.net/g88ucp7k/
First of, remove the z-index: 100; from the ::after
Wrap your footer content inside a position:relative DIV
Set z-index to that content in order to overlay... the overlay :)
footer {
padding: 50px 0;
width: 100%;
background-color: purple;
overflow: hidden;
}
footer .content{ /* ADDED */
position:relative;
z-index:1;
}
footer a{
color: white;
}
footer::after {
content: "";
background: url(http://cdn1.bestpsdfreebies.com/wp-content/uploads/2014/05/shards_pattern.jpg);
opacity: 0.4;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
/* z-index: 100; REMOVED */
height: 125px;
}
<footer>
<div class="content">
A link
</div>
</footer>
Im trying to make a popup box that causes the surrounding area to get greyed out. My issue is that the opacity of the shadow div seems to overide that of the popup. I tried changing one from absolute to fixed position and increasing the z index of the popup but neither worked.
Here is a screensot of the problem.
And below is the relevent code (ask if you need to see more)
.textPopup
{
width: 1400px;
height: 600px;
background-color: White;
position: fixed;
margin-left: auto;
margin-right: auto;
z-index: 15;
left: 0;
right: 0;
top: 50px;
bottom: 0;
opacity: 0.2;
}
#innerPopup
{
background-color: White;
width: 1350px;
height: 550px;
position: absolute;
margin-left: auto;
margin-right: auto;
z-index: 15;
left: 0;
right: 0;
top: 50px;
bottom: 0;
opacity: 1;
}
... snip
<div id="popupShadow">
</div>
<div class="textPopup">
<div id="innerPopup">
</div>
</div>
</body>
</html>
The issue you have is that #innerPopup is inside #textPopup. The opacity is then inherited by the child and cannot be overridden with it's own property.
If it is not possible to separate them, then consider using an rgba value for the background as opposed to the opacity property:
#textPopup {
background-color: rgba(255,255,255,0.2);
}
You can see it working on jsfiddle.
You'll be able to make it work as expected by making the following changes in your CSS:
#innerPopup
{
position: relative; /* change this to relative - will allow you to override the parent specified opacity */
opacity: 1;
/* other properties */
}