CSS Opacity Affecting Sibling Image Opacity

css opacity affecting sibling image opacity

You need to set the position (default is static) and a z-index for your image.

See jsfiddle

.righty {
    float: right;
    position: relative;
    z-index: 100;
}

The opacity you're setting on #schedulepicker is creating a new stacking context, and stacking contexts affect z-indexes. Since you didn't specify z-indexes manually, they're being auto assigned, and #schedulepicker has a higher value than #settingicon because it comes later in the markup.

EDIT

The W3C color module says the following:

If an element with opacity less than 1 is not positioned,
implementations must paint the layer it creates, within its parent
stacking context, at the same stacking order that would be used if it
were a positioned element with ‘z-index: 0’ and ‘opacity: 1’.

css opacity affecting sibling opacity

You need to close your <div> tags properly.

The issue you are experiencing is a result of your browser's attempt to 'fix' your markup at run-time, the <div> elements are incorrectly placed within one another, so they are no longer siblings.

Fixing your markup solves your problem.

table { border: 1px solid darkgrey; }td { border: 1px solid darkgrey; overflow: hidden; }div { text-align: center; }.build {     border: solid black 1px;    width: 10em;    margin: 0.2em;    padding: 0.2em;    font-size: 1.0em;}.test {    float: right;    border: solid lightgrey 1px;    width: 3em;    margin-top: -0.8em;    margin-right: -0.4em;    // opacity: .99;      // workaround}.fail { background-color: rgb(255, 150, 150); }.ok { background-color: rgb(170, 255, 170); }.red { background-color: rgb(255, 150, 150); }.green { background-color: rgb(150, 255, 150); }.stale { opacity: .5; }

<table>  <tr>    <th>Version</th>    <th>Product A</th>    <th>Product B</th>  </tr>  <tr>    <td>1.1</td>    <td>      <div class="build ok">success</div>      <div class="test green">100%</div>    </td>    <td>      <div class="build ok">success</div>      <div class="test red">98%</div>    </td>  </tr>  <tr>    <td>1.0</td>    <td>      <div class="build ok stale">success</div>      <div class="test red">99%</div>    </td>    <td>      <div class="build fail stale">failure</div>    </td>  </tr></table>

How to apply an opacity without affecting a child element with html/css?

As far as I know you can't do it in a simple way. There a couple of options here:

Use absolute positioning to position box "inside" the container.
```
#container {
    opacity: 0.3;
    background-color: #777788;
    position: absolute;
    top: 100px;
    left: 100px;
    height: 150px;
    width: 300px;
}
#box {
    opacity: 1;
    background-color: #ffffff;
    position: absolute;
    top: 110px;
    left: 110px;
    height: 130px;
    width: 270px;
}
```
```
<div id="container"></div>
<div id="box">
    <p>Something in here</p>
</div>
```
Sibling element inheriting opacity
I suspect you viewing your opacity: 1 icon through your transparent image. You want the icon to appear overtop. You could do this by adding a z-index to the icon, but I'd rather reorder the html so the icons are added after:
```
<div id="photos-wrapper">
  <div>
    <img src='http://dev.app.ucado.co.uk/${pamiec.photos[e]}' width='200px' height='150px'>
    <div class='remove-icon'> <i class="fas fa-times"></i> </div>
  </div>
  <div>
    <img src='http://dev.app.ucado.co.uk/${pamiec.photos[e]}' width='200px' height='150px'>
    <div class='remove-icon'> <i class="fas fa-times"></i> </div>
  </div>
  <div>
    <img src='http://dev.app.ucado.co.uk/${pamiec.photos[e]}' width='200px' height='150px'>
    <div class='remove-icon'> <i class="fas fa-times"></i> </div>
  </div>
</div>
```
Hover in CSS opacity sibling child element
How about chopping down your CSS to a great extent?
Demo
Demo 2 (a tag inside the box, you can tweak around)
```
.formContainer .teamImg {
    float: left;
    margin-left: 20px;
    position: relative;
    width: 300px;
}

.teamImg span {
    opacity: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    background: rgba(255,255,255,.5);
    top: 0;
    left: 0;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}

.teamImg:hover span {
    opacity: 1;
}
```
Am just positioning span tag absolute to the container element, also am transitioning the opacity here but am also using rgba() to make the element background slightly opaque.
Made from scratch, simplifying the idea
Demo 3
```
<div>
    <img src="URL_HERE" />
    <span>Write anything here</span>
</div>

div {
    float: left;
    border: 1px solid #aaa;
    position: relative;
}

div span {
    position: absolute;
    height: 100%;
    width: 100%;
    background: rgba(255,255,255,.5);
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}

div:hover span {
    opacity: 1;    
}
```
How can I change a background image opacity without changing on div content?
Because all children of an element are affected by its CSS, you cannot simply set the opacity of a background-image, however, there are several workarounds to this:
1. Use transparent background images (easiest imo)
Rather than setting the background image's opacity after the fact, just make the background image transparent in your favorite image editor (try gimp, it's free!) and save it as an image with transparency (like PNG).
2. Use positioning.
If you make the parent element have relative positioning and absolutely position child elements inside, you take them out of the flow and they will not be affected by the opacity of the parent. [Source]
3. Use sibling elements in the same position
If you separate the content from the parent and make the two elements siblings, you can position the elements that were children over the parent with z-indexing and set the opacity of the parent without affecting the child.
There are more, but one of those should get you what you want.

Changing the opacity of background image in css
HTML Background with BODY filter
<HTML> gets a background image while <body> gets a 50% transparent white (layer of transparent color using RGBA)
```
html, body {  height:100%;  padding: 0;  margin: 0;}
html {  background:url(https://i.ytimg.com/vi/qOfuTI5165w/maxresdefault.jpg) no-repeat center center fixed;}
body {  background:rgba(255,255,255,0.5); /* applies a 50% transparent white background */}
```
Opacity of div's background without affecting contained element in IE 8?
The opacity style affects the whole element and everything within it. The correct answer to this is to use an rgba background colour instead.
The CSS is fairly simple:
```
.myelement {
    background: rgba(200, 54, 54, 0.5);
}
```
...where the first three numbers are the red, green and blue values for your background colour, and the fourth is the 'alpha' channel value, which works the same way as the opacity value.
See this page for more info: http://css-tricks.com/rgba-browser-support/
The down-side, is that this doesn't work in IE8 or lower. The page I linked above also lists a few other browsers it doesn't work in, but they're all very old by now; all browsers in current use except IE6/7/8 will work with rgba colours.
The good news is that you can force IE to work with this as well, using a hack called CSS3Pie. CSS3Pie adds a number of modern CSS3 features to older versions of IE, including rgba background colours.
To use CSS3Pie for backgrounds, you need to add a specific -pie-background declaration to your CSS, as well as the PIE behavior style, so your stylesheet would end up looking like this:
```
.myelement {
    background: rgba(200, 54, 54, 0.5);
    -pie-background:  rgba(200, 54, 54, 0.5);
    behavior: url(PIE.htc);
}
```
Hope that helps.
[EDIT]
For what it's worth, as others have mentioned, you can use IE's filter style, with the gradient keyword. The CSS3Pie solution does actually use this same technique behind the scenes, but removes the need for you to mess around directly with IE's filters, so your stylesheets are much cleaner. (it also adds a whole bunch of other nice features too, but that's not relevant to this discussion)

Why does relative positioning remove opacity?
What you're seeing is z-index. Even though you already have a z-index on #welcome, a z-index property doesn't take effect until you add a non-static position to the element with the z-index. So adding position: relative activates the z-index on #welcome, putting #welcome on top of .bg-1 instead of behind it.

Related Topics

Fluid-Width Google Maps
Why Do You Put a Display:Block on an "A" Tag That Is Inside a List
CSS Problem to Make 2 Divs Float Side by Side
Why Is the Two P-Tags Not Beside Each Other When the Screen Is Wide
CSS Media Query Not Working in Ie 9
Possible Opacity Z-Index Bug
Counter-Increment in CSS
How to Get the Same Object with a Class in SCSS
Width Ignored on Flexbox Items
Why Does Container Div Insist on Being Slightly Larger Than Img or Svg Content
Cannot Change the Content of Visited :Before Pseudo-Elements
Draw an Arrow Inside Table Cell Using CSS
How to Set Animation on First Element on Loading
CSS Drop Down Navigation, 3Rd Level Issue
CSS - How to Align Image Left Bottom to the Text Block
Cut Out Transparent Circle with CSS3
Breaking to a New Line with Inline-Block
Hover Property in CSS Doesn't Work When I Have an Inline Styles