I have a big image with a dark overlay covering the front of my webpage. I want to add a div filled with bright text on top of the overlay.
Is there a way to position the div so as to exclude it from the overlay?
HTML:
.overlay {
position: absolute;
background-color: rgba(0, 0, 0, 0.45);
top: 70px;
left: 0px;
right: 0px;
bottom: -200px;
z-index: 1;
}
.about-us {
background-image: url("img.jpg");
width: 1100px;
height: 731px;
display: block;
position: relative;
}
<div class="about-us">
<div class="overlay">
<div class="intro">
<h2>Catchy title</h2>
<p>Small Para</p>
<h1>More txt</h1>
</div>
</div>
</div>
Something like this:
h2 {
background-color: white;
z-index: 2;
}
Assuming that was what you wanted on top.
Use a pseudo element instead of an overlay element.
.about-us:before {
content:"";
position: absolute;
background-color: rgba(0,0,0,0.45);
top: 70px;
left: 0px;
right: 0px;
bottom: -200px;
}
Also you need to explicitly specify position property for intro element in able to interact with the content:
.intro {
position: relative;
}
See example here
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>
There are the following code:
<div class="google-wrapper">
<div id="google-map"></div>
<div id="google-map-overlay">
<p>Loading...</p>
</div>
</div>
I want that google-map-overlay is over google-map and has red color and I could see google-map, i.e. google-map-overlay should be transparent div. Some styles:
.google-wrapper {
position: relative;
}
#google-map {
width : 500px;
height : 380px;
}
#google-map-overlay {
width : 500px;
height : 380px;
background: red;
position: absolute;
top: 0px;
left: 0px;
z-index: 99;
}
But I don't know how I can do a transparent overlay. Thanks in advance.
you need add opacity like this DEMO
#google-map-overlay {
width : 500px;
height : 380px;
background: red;
position: absolute;
opacity: 0.5;/*add this*/
top: 0px;
left: 0px;
z-index: 99;
}
it offhand, I would like to see exactly what you want to eventually get
I have this simple paper shadow effect for a div, but it's getting ruined whenever I set the parent's background-color property. Here's what it looks like: http://jsfiddle.net/9qahjjwx/
Below is the code. How do I get around this provided that I'll be using a background-color on the parent?
HTML
<section class="block1">
<div class="onpaper effect2">
<h2>Has Background Color on the parent</h2>
<p>This block has background color in its parent that's ruining the shadow effect (due to z-index?)</p>
</div>
</section>
<section class="block2">
<div class="onpaper effect2">
<h2>No Background Color</h2>
<p>This block has <b>no</b> background color in its parent by changing the class..</p>
</div>
</section>
CSS
.block1 {
background-color: #f7f4e8;
height: 200%;
}
.block2 {
height: 200%;
}
.onpaper {
margin:40px auto;
width:75%;
background-color: #d9d8c5;
padding: 3% 6%;
}
.effect2
{
position: relative;
}
.effect2:before, .effect2:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
box-shadow: 0 15px 10px #777;
transform: rotate(-3deg);
}
.effect2:after
{
transform: rotate(3deg);
right: 10px;
left: auto;
}
You'd need to add a z-index to the container and set it lower than the shadows: http://codepen.io/pageaffairs/pen/AgFJe
.block {
position: relative;
z-index: -2;
}
You can add another wrapper element in between, like so:
<section class="block">
<div class="in-between">
<div class="onpaper effect2">
<h2>Has Background Color on the parent</h2>
<p>This block has background color in its parent that's not ruining the shadow effect</p>
</div>
</div>
</section>
CSS:
.in-between {
position: relative;
z-index: 1;
}
That is ugly, but it works without setting a negative z-index on the parent (which might get you into trouble with the parent's parent).
You need to set a negative z-index and set the position to relative on .block2
.block2 {
height: 200%;
background-color: #f7f4e8;
position: relative;
z-index: -2;
}
DEMO
I have a button that is in a div, that is behind another div. The second div overlaps the first by using the css: position: absolute;
Therefore the button is not clickable. Is there any way I can make it clickable like a normal button?
Example: jsfiddle
body {
background-color: blue;
}
.stack {
width: 320px;
height: 240px;
position: absolute;
top: 50%;
left: 50%;
background-color: white;
margin-top: -120px;
margin-left: -160px;
}
.background {
width: 320px;
height: 240px;
background-image: url('http://www.userlogos.org/files/logos/ps1d3r/apple-black-i.png');
top: 0px;
left: 0px;
position: absolute;
}
.card {
pointer-events: none;
width: 320px;
height: 240px;
background-image: url('http://2.bp.blogspot.com/-OIHQM4x8l0U/UEiDLQyiTRI/AAAAAAAAHFs/i1a6rkqQ8tQ/s320/floral+swirl.png');
top: 0px;
left: 0px;
position: absolute;
}
<div class="stack">
<div class="background" onclick="alert('background clicked');">
<button onclick="alert('bg-button clicked');" style="left:65px; top:65px; position: absolute;">This is a background button</button>
<div class="card">
<button onclick="alert('card-button clicked');">This is a card button</button>
<textarea style="left:100px; top:100px; position: absolute;">This is a card textarea</textarea>
</div>
</div>
</div>
You can use pointer-events:none; on .card. This will disable the click event on the .card div and user can click on the button behind it. More info here (MDN).
Here is an example showing how you can enable the click envent on an element hidden behind another one :
button {
margin: 50px;
}
button:focus {
background: red;
}
button:hover {
background: teal;
}
.inFront {
pointer-events: none;
position: absolute;
top: 25px; left: 25px;
right: 25px; height: 150px;
border: 3px solid red;
background: rgba(0, 0, 0, .5);
}
<button onclick="alert('button clicked');">I am a button behind the .inFront div</button>
<div class="inFront"></div>
In this example, the .inFront div is over the button but the pointer-events: none; property on the div allows the button to be clicked, focused and hovered.
Regarding your example, the drawback is that it will also disable the textarea and the "card button" so you will have to change your HTML and move both textarea and card button out of the .card div so they are still clickable. Here is a demo :
DEMO
Use z-index in this case.
<button onclick="alert('bg-button clicked');" style="left:65px; top:65px; position: absolute; z-index:1;">This is a background button</button>
DEMO
This positions the element in the depth field higher than everything else. The higher the number, the higher the stack order.
z-index: 1;
Though, z-index requires positioning such as position: absolute; or position: relative;.
Read a great article about Z-Index here.
Give the button a positive z-index
button {
position: absolute;
z-index: 1;
}
For those who have the same issue as I do where(not restructuring your HTML):
div 1 is on top of div 2
Both div 1 and 2 needs to be clickable/interactive
However div 2 should be infront of div 1
Apply the following codes to div 2:
div2 {
position: absolute; // to manipulate position
z-index: 999; // manipulating the position, putting it in front of div1
pointer-events: visible; // making it interactive, clickable
}