How to create parent div with opacity while keeping the opacity of the text at 100%
What I fiddled upon and came on conclusion though is this is what you need I think.
Below is CSS that you have to use.
Fiddle: Click HERE
Demo (Transparent background)
html, body {
margin: 0;
height: 100%;
background-color: #575980;
}
#container {
width: 200px;
height: 300px;
cursor: pointer;
overflow: hidden;
margin: 100px auto;
border: 1px solid #333;
background-color: #000;
box-shadow: 0px 2px 8px #111;
}
#container_inner {
opacity: .8;
margin: auto;
width: 200px;
height: 300px;
transition: .5s;
position: relative;
background-color: #FFF;
background-image: url('http://static.mmo-champion.com/mmoc/images/news/2010/march/ss973.jpg');
background-size: 200% 100%;
background-position: 60% 50%;
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5);
}
#container_inner:hover, #container_txt:hover {
opacity: 1;
}
#container_txt {
color: #fff;
height: 0px;
bottom: 0px;
width: 200px;
transition: .2s;
position: absolute;
font: normal 1em calibri;
background-color: rgba(0, 0, 0, 1);
}
#container_inner:hover #container_txt {
height: 100px;
opacity: 1;
}
p {
top: -5px;
padding: 0px 10px;
position: relative;
}
p a {
color: #fff;
text-decoration: none;
}
#p_txt {
top: -15px;
position: relative;
font-size: 12px;
}
CSS - Opaque text on low opacity div?
Set the opacity on the background rather than the element.
background-color: rgba(255,0,0,0.6);
A while ago I wrote about how to achieve this in a backwards compatible way.
How to set opacity on container div and not on children text?
If you set the opacity of an element, the opacity is set for all of its children as well. If you want opaque text on a transparent background, take a look at RGBa.
The result would look something like this:
.mycontainer {
background: rgb(60, 60, 60);
background: rgba(60, 60, 60, 0.4);
}
.mycontainer a {
color: #fff;
}
The first background declaration serves as a fallback in case a browser doesn't support RGBa color - it will simply be a solid color instead.
Here's a great reference for RGBa color: https://css-tricks.com/rgba-browser-support/
How to set opacity in parent div and not affect in child div?
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
Opacity Control Over other Items Inside the container
The approach is wrong sir. It's child element's default behavior. You can't set opacity:1 to the child element once you set it to the parent element.
You have so many ways to achieve this. But since you are using a background color and looking for the opacity I suggest the easiest way that use background:rgba(0,0,0,0.5).This stands that the background color is #333 with the opacity of 0.5.
Learn more about rgba() here.
#container{
/*opacity: 0.5;*/ //remove this line
margin: 0 auto;
padding: 0 auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 380px;
height: 480px;
/*background: #000;*/ //remove this line
border: 4px solid #ffbd04;
border-radius: 20px;
background:(0,0,0,0.5); //newly added line
}
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>how to have an opacity:1 text in an opacity:0.5 div
Set the background color of the parent using rgba (includes alpha transparency). Example:
.Container {
background-color:rgb(0,0,0); /* fallback for IE 8 and below */
background-color:rgba(0,0,0,0.5);
}
.Text {
color:rgb(255,255,255);
}This sets the opacity of the background of the container when using colors, however it does not set the opacity of the children. If you need to do that, set the opacity of the children to whatever you'd like with another class:
.OtherChildItem {
opacity:0.5;
filter:alpha(opacity=50); /* IE 8 and below */
}If you want to use a background-image, just set the opacity on the image itself (use a PNG).
Related Topics
How to Make a Simple Modal Window
Rails Application Doesn't Load CSS/Js/Images in Production-Environment
How to Create a Mobile Friendly Website [Infrastructure]
A Singleton List of List Is Automatically Decomposed
How to Change The Font of Some Textoutput Elements
Two Divs; Left Should Be Fixed Width, Right Should Fill Rest of Space
Styling The Calendar for HTML5 Native Datepicker
How to Calculate CSS Zoom Factor in Dependence on Screen Width
How to Make Same Layout for All Web Pages
How to Use Fastclick with Jquery Mobile The Right Way
How to Center an Inline Div Using CSS
Incompatible Units: 'Rem' and 'Px' with Bootstrap 4 Alpha 6
Conditional CSS in CSS Not Working
Prevent CSS3 Flex-Shrink from Crushing Content