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>
Related
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;
}
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>
Trying to have my back and next buttons have an animated 'background' created by a :before element when hovered over. The back and next buttons are located at the sides of the page and are the text of the posts so I don't have full control over their content. I want the background block to stretch from one side to the other (right to left on next, left to right on previous) behind the text.
I want the background block (:before element) to be the full height and width of the text it is behind (text has padding)
css (I left out the transition: css until I can get it working properly.)
#nav-BN {
position: relative;
display: block;
padding: 0;
margin: 50px 0;
}
.nav-previous, .nav-next {
display: block;
position: absolute;
z-index: 1;
}
.nav-previous { left: 0; }
.nav-next { right: 0; }
.nav-previous a, .nav-next a {
display: block;
position: relative;
z-index: 2;
text-align: center;
color: #333;
padding: 10px 20px;
}
.nav-previous a:before, .nav-next a:before {
display: inline-block;
position: absolute;
content: '';
left: 0; top: 0;
height: 100%; width: 0%;
background-color: #000;
}
.nav-previous a:hover:before, .nav-next a:hover:before { width: 100%; }
.nav-previous:before { transform-origin: left center; }
.nav-next:before { transform-origin: right center; }
<div id="nav-BN">
<div class="nav-previous">
<a>link</a>
</div>
<div class="nav-next">
<a>link</a>
</div>
</div>
Issues I've encountered is using 100% width, makes it full width of screen not of the containing div. text jumping around page when hovered, etc
I have used this before and I think it is exactly what you are looking for:
http://ianlunn.github.io/Hover/
Use the example hvr-shutter-out-horizontal :
<a class="hvr-shutter-out-horizontal" href="#">Shutter Out Horizontal</a>
but change the css for .hvr-shutter-out-horizontal to background: transparent;
https://cssanimation.rocks/pseudo-elements/
Hope this helps. Not sure exactly what you are trying to do-
I think you should try
flex box
I'm trying to create a setup where I have a navbar, a collapsible menu within the navbar, and website content.
Sorry for the bad example but kind of like this: https://jsfiddle.net/2nqchLpf/
As you can see if you hover over the sub-menu links when the dropdown is not expanded, you can still click on them.
How can I get the links to display behind the content while having the navbar display over everything?
I have applied z-index like this:
.navbar {
position: fixed;
z-index: 1000;
}
.big-dropdown {
position: absolute;
z-index: -1;
}
#content {
position: relative;
z-index: 999;
}
It's tricky with z-index, considering stacking order and other z-index characteristics. Here's a complete run-down: Basics of the CSS z-index property
But for a simple and easy solution, since you're already using position: absolute, just move the sub-links off the screen.
So instead of this:
.big-dropdown {
opacity: 0;
height: 200px;
background-color: #fff;
position: absolute;
left: 0;
top: 0;
margin-top: 4em;
width: 100%;
}
.show {
opacity: 1!important;
}
Try something like this:
.big-dropdown {
opacity: 0;
height: 200px;
background-color: #fff;
position: absolute;
left: -9999px; /* adjustment */
top: 0;
margin-top: 4em;
width: 100%;
}
.show {
opacity: 1!important;
left: 0; /* new */
}
revised fiddle
This may not be exactly what you are looking for, but if you replace
.show {
opacity: 1!important;
}
with
.show {
display: block;
}
and used
display: none;
instead of
opacity: 0;
it would work
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 */
}