I'm having some problems with getting the right opacities for .div1. I can only make it a lower opacity than the .container or the same but I want it to be higher I want to get it to 1 instead of 0.92. Can anybody help me figure out how to get it .div1 to opacity lvl 1?
html:
<div class="container">
<div class="div1">sth1</div>
<div class="div2">sth2</div>
</div>
css:
.container {
position: fixed;
width: 100%;
height: 100%;
background-color:black;
opacity: 0.92;
}
.div1 {
background-color: white;
padding-top: 50px;
padding-bottom: 50px;
width: 100%;
opacity: 1.0;
}
Opacity values are not inherited. Rather, they stack. So if you make .container have opacity 0.92, and don't change any other opacities, the CSS opacity of the child elements div1 and div2 will be 1 by default. Yet those child elements will look like they have 0.92 opacity, visually, because they're inside container. If you change div1's opacity property to 0.5, then its visual opacity will be 0.92 * 0.5 = 0.46.
Thus, you can't have a child element be more opaque than its parent. A child element will always look at least as transparent as its parent.
To solve this, you could try to move the child element out of the parent. You could use absolute positioning to position it over the parent so it looks like it is inside. Alternatively, if the only reason you want opacity is to make the parent's background color transparent, you could specify a transparent color using rgba():
.container {
background-color: rgba(0, 0, 0, 0.92); /* transparent black */
}
Related
I'm trying to create a transition for both an image and a pseudo element of its container, but for some reason, these transitions appear to be out of sync with each other, resulting in the pseudo element reaching a opacity: 0 state before the image does.
I've tried various combinations of style rules, but I never managed to accomplish an ease-in-out transition to work correctly.
Here's some context for the current code: the image is padded on purpose, to provide a better visual (centered) of its content. The images that'll be used are always guaranteed to have a white background. That's why I'm using a pseudo-element with a white background color to fill the vertical spaces that the image does not cover.
The background-image should take the full width/height of the container and there are not guarantees of its background being white.
The desired effect is for both the pseudo-element and image to reach opacity: 0 at the same making it look like its a single element.
I'm also considering using an ::after pseudo element to provide a "loading skeleton" while the image is not retrieved from the server, but that's not a concern for now.
Here's the code, and the respective fiddle: https://jsfiddle.net/rjk2z31d/1/
*,
*::before,
*::after {
box-sizing: border-box;
}
.box {
width: 248px;
height: 320px;
}
.image-box {
position: relative;
display: block;
background-repeat: no-repeat;
background-size: cover;
line-height: 0;
background-color: #FFFFFF;
&::before {
display: block;
content: "";
width: 100%;
padding-top: (100% + (100% / 3));
}
img {
z-index: 1;
position: absolute;
top: 50%;
left: 0;
width: 100%;
transform: translate3d(0, -50%, 0);
padding: 16px 16px;
}
&::before, img {
background-color: #FFFFFF;
opacity: 1;
transition: all 1.5s ease-in-out;
}
&:hover {
&::before, img {
opacity: 0;
}
}
}
<div class="box">
<div class="image-box" style="background-image: url('https://via.placeholder.com/248x320/FF0000/000000?text=Background')">
<img src="https://via.placeholder.com/248x320/FFFFFF/000000?text=Image">
</div>
</div>
Actually, they both fade at the same speed.
The out-of-sync effect you're talking about is an illusion due to the opacities overlapping.
If you set the initial opacity of both elements, it's easier to understand what's going on.
The image's faded white added to the pseudo element's faded white looks less transparent than the pseudo element's faded white alone.
See it in effect with the below image:
If you need to be convinced of their synchronization, add a transform rule to the :hover handler. the result is synced as it is supposed to be.
As a workaround, I would suggest you to try figuring out a better approach than fading overlapping elements.
You could use the <picture> tag with css object-fit property to get rid of those blank spaces.
picture doc
object-fit doc
I'm implementing an ::after pseudo-element on an container div. The pseudo element sets a background-color, top 0, left 0, 100% width and height. Inside the div the height is set to 200px. This HTML/CSS combination results in the background-color covering the entire nested div that is enclosed and the added height and width specified.
However, if I remove ::after, the background-color is inserted, but under not on top of the nested div, which seems completely counter-intuitive. Why does using the ::after (or ::before) pseudo-element result in the content covering the nested div, while not using it results in the nested div going on top of the overlay? Shouldn't ::after mean it goes AFTER the content?
.container1 {
position:relative;
height: 100%;
}
.overlay::after {
content: '';
position: absolute;
top: 0;
left: 0;
background-color: hsla(211, 100%, 18%,.6);
z-index: 2;
width: 100%;
height: 100%;
}
#hero {
height: 200px;
background: url(https://preview.ibb.co/nRxrBS/hero_truck_lg.jpg) no-repeat;
}
<div class="container1 overlay">
<div id="hero"></div>
</div>
You've got several items interfering with each other. But I think your main issue is this:
position:absolute; pulls elements out of the render order, causing them to render on top of static elements.
I am trying to make an element opaque, that's in a <div> that is not opaque. I tried simply applying opacity: 1, but the background still showed through the element. I also tried adding !important to the attribute.
Thanks!
If the <div> has a background-color
Instead of using opacity on the <div>, you can use background-color: rgba(red, green, blue, alpha) to specify its background color. Just replace red, green, blue and alpha with their corresponding values.
If the <div> has a background-image
It is not trivially possible. But one workaround would be to have 2 <div>s, one over the other. The lower <div> would be non-opaque, and have a background. The upper <div> would have your content. Use z-index to place the div with the content above the div containing the background image.
Another workaround would be to actually have a transparent PNG image as the background-image of the <div>.
It is not possible, opacity is inherited (mandatory, cannot override), if the parent <div> you're using uses a background image, you have to move the element outside, maybe using absolute position, to locate it over the non-opaque one. If the parent <div> just have a color background and you make a percent transparent, easy!... you need to assign a RGBA color background (and opacity 1, of course).
I recommend a tool I've found useful: http://hex2rgba.devoth.com/ so you can calculate the rgba value properly. That's it
If your parent div simply has a background color or background image, then you can do something like this:
HTML:
<div id="parent">
<div id="child">
<span>Hello World</span>
</div>
</div>
CSS:
#parent{
width: 100px;
height: 100px;
position: relative;
}
#parent:after{
display: block;
position: absolute;
top: 0;
left: 0;
content: '';
width: 100%;
height: 100%;
background: url('someimage.png') no-repeat 0 0 transparent;
opacity: 0.7;
z-index: -1;
}
I have the following HTML structure that I'd like to keep nested:
<div class="parent">
<div class="shadow">Shadow here!</div>
</div>
CSS:
.parent {
background: blue;
z-index: 2;
height: 200px;
}
.shadow {
background: lightgrey;
z-index: 0;
opacity: 0.4;
position: relative;
top: 194px;
}
Essentially, I want the div .shadow to be underneath the div .parent. If you look at the rendering at the below link, you can see that part of the parent's blue background goes through the shadow; instead, I'd like the parent element to cover that overlapping part (stacked on top of, I guess you can say):
https://jsfiddle.net/9ya7kb67/
How could I do this? I'm fiddling around with z-index, but that isn't helping.
This is simple... give your shadow z-index property negative value like this. You can also manage z-index by giving higher value. Or you can use box-shadow property to make shadow.
.parent {
background: blue;
z-index: 2;
height: 200px;
}
.shadow {
background: lightgrey;
z-index: -1;
opacity: 0.4;
position: relative;
top: 194px;
}
You can use box shadow with CSS3 https://css-tricks.com/snippets/css/css-box-shadow/
CSS box-shadow works by creating a shadow behind an element. Thus, the element is already on top of the shadow. Here, z-index is not required.
the code:
.parent {
background: blue;
height: 200px;
box-shadow: 0 8px 0 4px light grey;
}
is doing the same thing regardless if you include z-index or not.
I'm not sure if it is the answer you are looking for, but you can always use the CSS property box-shadow on your parent to get a 'shadowy' effect.
See this fiddle here
You can find box shadow generators online to make your life easier, such as this one
.shadow requires a negative z-index value as z-index is inherited from it's parent and is comparatively displayed. z-index:0; gives it the same overall z-index the parent has, and as the child was declared after the parent, it is therefore on top. This means that by setting it to z-index:-1 you are placing the shadow behind the parent.
However, if you simply want a box-shadow I would recommend actually using CSS3 Box Shadows instead of creating additional elements.
Because the shadow is INSIDE of the parent, there is no way to make the parent appear on top of whatever is inside. This is because in CSS a child element inherits the z-index of its parent as a BASE z-index. It can have its own z-index but it can never be less than its parent.
EDIT: Box shadow solution -
https://jsfiddle.net/9ya7kb67/3/
.parent {
background: blue;
z-index: 2;
height: 200px;
box-shadow: 0 8px 0px 4px lightgrey;
}
EDIT2: I stand corrected about it being impossible to put a child below a parent. You CAN actually do this, but that is assuming that the parent does not already have a z-index set. If the parent has a z-index, THEN it is impossible to place it on top of a child.
Im working on the opacity of an element using css. a paragraph is place in a div but when i set the opacity of the div to 0.4 the paragraph also affect. I tried to override the div in the paragraph by asigning the opacity 1.0 by this doesnt work. How can I solve this?
The short answer is that you can't. That is just how opacity works.
A longer answer depends on what are you actually trying to achieve (the old XY Problem).
If, for instance, you wanted the background of the div to be translucent, but not the paragraph then you could solve that by using a translucent background instead of making the entire div translucent.
The only way I know to fix this is to separate the background from the content:
<div id="container" style="position: relative;">
<div id="background" style="position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; opacity: 0.4; background: #ccc;"> </div>
<div id="content">Your content here</div>
</div>
I have done this earlier.
If I remember right, I set the position:absolute; to the innerDiv, hence the opacity property works well.
Another way to achieve this effect is to set the background of the outerDiv with alpha instead of opacity;
For eg:
change
.outerDiv{
background-color: white; //or #fff or rgb(255,255,255)
opacity: 0.4;
}
to
.outerDiv{
background-color: rgba(225,225,225,0.4);
}
The fourth value is the alpha which works like opacity. It will not bother the contents of the div.