I want apply opacity for parent but I do not want the child element to inherit this opacity.
<div class="parent">
<div class="child"></div>
</div>
.parent {
opacity: 0.6;
}
Is there a way to "cancel" the inherited opacity? maybe force it to opacity=1for the child element?
The opacity of the child will always be the opacity of the parent if the opacity of the child is 1.
This is not a problem with inheritance, but rather with the way opacity is calculated.
For instance,
<div id="parent">
<div></div>
</div>
<div id="original">
</div>
<div id="quarter">
</div>
#parent div, #quarter {
width: 100px;
height: 100px;
background-color: orange;
}
#parent div {
opacity: 0.5;
}
#parent {
opacity: 0.5;
}
#quarter {
opacity: 0.25;
}
#quarter's opacity, from your perspective, is the same as that of #parent div, but in actual fact, #parent div has twice the opacity of #quarter. See this jsfiddle for more detail: http://jsfiddle.net/HUaNm/
The only way to avoid this is to move the child out of the parent. Alternatively, depending on what you want here, you can also use rgba colors for the background/border/font color of the parent instead of opacity, but the effect is not the same as applying opacity.
if you have parent background color - use RGBA,
if you have parent image - use additional RGBA layer between parent and child divs playing with css position.
Related
I want to hover over a image to animate and display a block of text using CSS. The problem is that I can only seem to animate child elements.
<div id="does-not-work">
<p>DOES NOT WORK</p>
<p>Hover over the image</p>
<img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png"/>
<p class="show-bubble">Should display this text</p>
</div>
#does-not-work img:hover .show-bubble{
max-height: 200px;
}
My expectation is that I hover over the img element inside the #does-not-work div and it shoud change the max height of .show-bubble. But it doesn't.
Using a html construction like this does work though:
<div id="does-work">
<p>DOES WORK</p>
<p>Hover over the image</p>
<img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png"/>
<p class="show-bubble">Should display this text</p>
</div>
#does-work:hover .show-bubble{
max-height: 200px;
}
This is because the hover is now on the parent element of the block I want to show. The problem is that I only want to trigger the animate effect when a user hovers over the image, and not the whole block
https://plnkr.co/edit/4qbwdGkW9l5P6WvvtTsP?p=preview
This is because you have .hover for parent element and img tag together. So both the hover triggers at same time
Remove this code
#does-not-work img:hover .show-bubble{
max-height: 200px;
}
#does-work:hover .show-bubble{
max-height: 200px;
}
And add this code
#does-not-work img:hover ~ .show-bubble{
max-height: 200px;
}
try this
#does-not-work img:hover + .show-bubble{
max-height: 200px;
}
Or
#does-not-work img:hover ~ .show-bubble{
max-height: 200px;
}
In order to make the hover work you need to change your code to the following:
#does-not-work img:hover + .show-bubble{
max-height: 200px;
}
and the hover will fire when you hover over the image as opposed to the div.
The plus (+) operator in CSS is the adjacent sibling selector. It will select the element after the image which is what you want.
This question already has answers here:
how to cancel opacity for a child element?
(2 answers)
Closed 6 years ago.
I would like to set opacity to a parent div but not 1 particular child div.
So i have a html code like:
body {
background-image: url(http://url.jpg)
}
#main {
opacity: 0.9;
}
#slider {
opacity: 1;
}
<body>
<div id="main">
<div id="slider">
</div>
<div id="content-wrapper">
</div>
</div>
</body>
Obviously this won't work. The whole #main div is now transparant to the background div. That is what i want but not the #slider div. For some reason, when only setting opacity to the #content-wrapper, nothing happens at all.
Any ideas?
Edit:
I can't use an rgba color, since i would like the background image to come through. Could you explain why adding opacity to #content-wrapper is not working?
Maybe with rgba or hsla color code can help
#someParent {
background: rgba(0,0,0,0.5);
}
I want make different background between father elem and child elem.
fiddle : http://jsfiddle.net/cbcL6osm/
I mean, if you see the child div, its background color is red inherited from father div.
That's not I want.
I want make child div to only shows its background image, and do not inherit background color from its father div.
Below is the code of fiddle : http://jsfiddle.net/cbcL6osm/
html :
<div class="father">
test
<div class="child">
test
</div>
</div>
css :
.father {
width: 100px;
height: 100px;
background-color:red;
position:relative;
}
.child {
position:absolute;
top:20px;
left:20px;
width: 60px;
height: 60px;
background:url('https://www.google.co.kr/logos/doodles/2014/leo-tolstoys-186th-birthday-5756677508825088.2-res.png') center;
background-size:30px 30px;
background-repeat:no-repeat;
border:thin solid;
}
The point, actually, is your false premise.
The child div does not inherit the parent's background color
The default background of the div is transparent, that is why the red color is appearing. You would need to replace the background-color of the child div with another one.
MDN background-color docs states:
Initial value: transparent
Inherited: no
<div class="parent">
<div class="child">
</div></div>
In CSS, "child" class has its own bg color, that I can't change. I want to apply "parent" class bg color to container. So, Is there any CSS trick to override "child" bg color by "parent" bg color.
Any help would be much appreciated.
!important will override any inline background color applied, let me know if this works
.parent > .child {
background-color: transparent !important;
}
.parent .child {
background-color: inherit !important; // can also use "transparent"
}
Use !important only if nothing else works.
You could override the CSS using jQuery, although it's inelegant. So, if you have HTML
<div class="parent">
<div class="child">
</div></div>
and CSS:
.parent {
width: 100px;
height: 100px;
background: red;
}
.child {
width: 50px;
height: 50px;
background: blue;
}
this jQuery will find the parent background color and apply it to the child:
$('.child').on('click', function(event) {
var bg = $(this).parent().css("background-color"); // finds background color of parent
$(this).css("background-color", bg); // applies background color to child
});
Here's a jsfiddle: link
This question already has answers here:
I do not want to inherit the child opacity from the parent in CSS
(18 answers)
Closed 7 years ago.
Hey i am searching in google but i can't fine any perfect answer
I want to Opacity in parent DIV but not Child DIV
Example
HTML
<div class="parent">
<div class="child">
Hello I am child
</div>
</div>
Css
.parent{
background:url('../images/madu.jpg') no-repeat 0 0;
}
.child{
Color:black;
}
Note: -- I want to background-image in Parent Div not Color
I know this is old, but just in case it will help someone else.
<div style="background-color: rgba(255, 0, 0, 0.5)">child</div>
Where rgba is: red, green, blue, and a is for transparency.
May be it's good if you define your background-image in the :after pseudo class. Write like this:
.parent{
width:300px;
height:300px;
position:relative;
border:1px solid red;
}
.parent:after{
content:'';
background:url('http://www.dummyimage.com/300x300/000/fff&text=parent+image');
width:300px;
height:300px;
position:absolute;
top:0;
left:0;
opacity:0.5;
}
.child{
background:yellow;
position:relative;
z-index:1;
}
Check this fiddle
You can do it with pseudo-elements: (demo on dabblet.com)
your markup:
<div class="parent">
<div class="child"> Hello I am child </div>
</div>
css:
.parent{
position: relative;
}
.parent:before {
z-index: -1;
content: '';
position: absolute;
opacity: 0.2;
width: 400px;
height: 200px;
background: url('http://img42.imageshack.us/img42/1893/96c75664f7e94f9198ad113.png') no-repeat 0 0;
}
.child{
Color:black;
}
As mentioned by Tom, background-color: rgba(229,229,229, 0.85) can do the trick.
Place that on the style of the parent element and child wont be affected.
You can't. Css today simply doesn't allow that.
The logical rendering model is this one :
If the object is a container element, then the effect is as if the contents of the container element were blended against the current background using a mask where the value of each pixel of the mask is .
Reference : css transparency
The solution is to use a different element composition, usually using fixed or computed positions for what is today defined as a child : it may appear logically and visualy for the user as a child but the element doesn't need to be really a child in your code.
A solution using css : fiddle
.parent {
width:500px;
height:200px;
background-image:url('http://canop.org/blog/wp-content/uploads/2011/11/cropped-bandeau-cr%C3%AAte-011.jpg');
opacity: 0.2;
}
.child {
position: fixed;
top:0;
}
Another solution with javascript : fiddle
I had the same problem and I fixed by setting transparent png image as background for the parent tag.
This is the 1px x 1px PNG Image that I have created with 60% Opacity of black background !
You can't do that, unless you take the child out of the parent and place it via positioning.
The only way I know and it actually works, is to use a translucid image (.png with transparency) for the parent's background. The only disavantage is that you can't control the opacity via CSS, other than that it works!