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.
So i have a div and in that div i have a button and a text box. The div i have set with opacity of 0.5. Okay perfect, however i do not want all of the content in the div to be transparent. How can i make the textbox and button full brightness?
.bodybox {
position:absolute;
background-color: white;
top: 160px;
width: 960px;
height: 450px;
z-index: 13;
margin-left: 24.736842105263158%;
margin-right: 24.736842105263158%;
opacity: 0.1;}
This is what i have so far so you can see what i mean.
In such cases rgba helped me. Substitute background value.
bodybox {
position:absolute;
background: rgba(255, 255, 255, 0.5);
top: 160px;
width: 960px;
height: 450px;
z-index: 13;
margin-left: 24.736842105263158%;
margin-right: 24.736842105263158%;
opacity: 0.1;
}
You can use the :after attribute if you have an image
.bodybox {
position: relative;
}
.bodybox:after {
content : "";
display: block;
position: absolute;
top: 0;
left: 0;
background-image: url(/wp-content/uploads/2010/11/tandem.jpg);
width: 100%;
height: 100%;
opacity : 0.2;
z-index: -1;
}
Or,if you only have a background-color, you can use rgba:
.bodybox {
position:absolute;
background-color: rgba(255,255,255, 0.1)
top: 160px;
width: 960px;
height: 450px;
z-index: 13;
margin-left: 24.736842105263158%;
margin-right: 24.736842105263158%;
}
Related
Here is a link to something similar.
https://codepen.io/suez/pen/RpNXOR
.img {
overflow: hidden;
z-index: 2;
border-radius: 25px;
position: absolute;
left: 0;
top: 0;
width: 260px;
height: 100%;
padding-top: 360px;
}
.img:before {
content: "";
position: absolute;
right: 0;
top: 0;
width: 900px;
height: 100%;
background-size: cover;
background-image: url(/images/art.png);
transition: transform 1.2s ease-in-out;
}
.img:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
}
Is there a reason why the button and text disappear behind the image when it transitions ove
If you are looking to have your text & button appear on top of the image, the text & button must have a higher z-index than 2 because assuming that your .img class controls your image, your image is declared as z-index: 2;. Try adding the z-index: 3; declaration to both your text & button.
This question already has answers here:
z-index is canceled by setting transform(rotate)
(7 answers)
Closed 5 years ago.
I have a drop shadow at the bottom left corner of a div. I created it using a ::before pseudo-element. I want the div to scale when I hover over it but when I do so the pseudo-element moves to the top of the stack order. Why does this happen and how can I stop the element from moving to the top?
.grid-item {
width: 200px;
height: 200px;
margin: 100px auto;
background-color: #c2c8e1;
border: 1px solid rgba(211, 215, 233, 0.9);
position: relative;
transition: transform 0.2s ease-in-out;
}
.grid-item:before {
content: "";
z-index: -1;
width: 60%;
position: absolute;
top: 80%;
bottom: 12px;
left: 10px;
background: #777;
box-shadow: 0 15px 10px #777;
transform: rotate(-4deg);
}
.grid-item:hover {
transform: scale(1.03);
}
<div class="grid-item"></div>
Seems like a bit of a glitch. It's a child of grid-item, if you apply a z-index to grid-item itself you'll find that it is always on top, which makes sense, as grid-item just has a bg colour and since it is position: relative, its child would always be "on top" of it even if it has a lesser zindex.
You could use two pseudo elements -
.grid-item {
width: 200px;
height: 200px;
margin: 100px auto;
position: relative;
}
.grid-item:after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background-color: #c2c8e1;
border: 1px solid rgba(211, 215, 233, 0.9);
transition: transform 0.2s ease-in-out;
z-index: 99;
}
.grid-item::before {
content: "";
z-index: -2;
width: 60%;
position: absolute;
top: 80%;
bottom: 12px;
left: 10px;
background: #777;
box-shadow: 0 15px 10px #777;
transform: rotate(-4deg);
}
.grid-item:hover {
transform: scale(1.03);
}
<div class="grid-item"></div>
I need to have a transparent background image. With a different image on each page. I have looked at the other answers on here and all of them have me specify the image in the CSS page which doesnt work because then it is on all the pages.
Here is what I have so far
#content
{
padding: 15px 30px 0 0;
}
#main-content
{
position: relative;
margin-left: 250px;
max-width: 600px;
}
#main-text
{
padding: 10px 15px 19px 15px;
z-index: 1;
position: relative;
}
img
{
position: absolute;
top: 0;
width: 100%;
height: 100%;
opacity: 0.1;
z-index: -1;
}
But it is applying the transparency and sizing to all the other images on the page.
I figured it out, I just created separate classes for the background images and foreground images.
HTML
<img class = "background" src="Images/wheel.png" alt="wheel"/>
CSS
img.background
{
position: absolute;
top: 0;
width: 100%;
height: 100%;
opacity: 0.1;
z-index: -1;
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I made a slider with pure css and I want to set the background opacity of each background-image (so, that I can give it a nice fade animation). I know that I could use css generated content to add image using opacity: 1; property but I have a lot of css code so is there any easy way to get around this??
without any generated content or psuedo-elements??
/************ SLIDER ************/
/*this contains the slides which are inside a wrap*/
#slide-Panel{
width: 100%;
height: 40%;
overflow: hidden;
}
/*this contins the slides*/
.wrap{
position: relative;
width: 100%;
height: 100%;
background: #000;
text-align: center;
overflow: hidden;
}
.slide{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 100%;
z-index: 10;
background: #000;
background-repeat: no-repeat;
background-position:50% 50%;
background-size: cover;
padding: 2em 2em;
color: white;
font-size: 1em;
}
.slide a {
background: #0FCABF;
padding: .6rem 1.6rem;
color: white;
font-weight: 700;
margin: 1rem;
}
.wrap input[type="radio"]{
position: absolute;
z-index: 200;
bottom: 10%;
left: auto;
right: auto;
}
.wrap input[type="radio"]:nth-of-type(1){
margin-left: -1.2rem;
}
#slider-2-trigger{
margin-left: .4rem;
}
.slide-two{
background-image: url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/35VYJ0NK0V.jpg');/*change the opacity of these images*/
}
.slide-one{
background-image: url('https://images.unsplash.com/photo-1432821596592-e2c18b78144f?crop=entropy&fit=crop&fm=jpg&h=750&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1175');/*change the opacity of these images*/
}
[id^="slider"]:checked + section {
z-index: 100;
left: 0;
}
.slide :not(img){
display: none;
}
.slide img{
opacity: .6;
width: 220px;
height: 148px;
margin: 2em auto;
}
There is no direct way to change the opacity of a background image.
But here's a workaround, please try this.
Here's the code you should use:
div::after {
content: "";
// Add your background image here
background: url("https://upload.wikimedia.org/wikipedia/commons/2/29/Example_image_not_be_used_in_article_namespace.jpg");
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
And the JSFiddle to it.
I am trying to apply a simple css3 animation, and apply opacity to the background image when the text jumps but it effect the whole div's.
Here is the jsfiddle link
And this is the main wrapper div:
.movie_thumb_wrapper {
float: left;
line-height: 31px;
background-color: #424755;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
overflow: hidden;
height: 140px;
width: 220px;
background-size: 220px 140px;
background-repeat: no-repeat;
background-color:#1a1c26;
}
A slightly different approach from Vitorino Fernandes' answer would be to 'nest' a pseudo element between the text and background:
div {
position: relative;
height: 300px;
width: 300px;
display: inline-block;
color:white;
}
div:before,
div:after {
content: "";
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
transition:all 0.8s;
}
div:before {
background: rgba(0, 0, 0, 0); /*this changes on hover - you might just want to change it here to get rid of the hover altogether*/
z-index: -1;
}
div:after {
z-index: -2;
background: url(http://placekitten.com/g/300/300);
}
div:hover:before{
background: rgba(0, 0, 0, 0.6);
}
<div>Hover to see effect</div>
So, in terms of your fiddle, add:
.movie_thumb_wrapper{
position:relative;
}
.movie_thumb_wrapper:after {
content: "";
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
transition:all 0.8s;
background:rgba(0,0,0,0.6);
z-index:-2;
}
jsfiddle example
Short answer, you can't. you need to create layers, using CSS position absolute, and z-index, so the text sits "on top of" the semi transparent layer. (instead of "inside" it as a a child element)
You can use pseudo element :after
div {
width: 200px;
position: relative;
border-radius: 5px;
text-align: center;
}
div:after {
content: '';
position: absolute;
top: 0;
left: 0;
opacity: .7;
right: 0;
bottom: 0;
z-index: -1; /* so that it goes in the backward */
background: url('http://placeimg.com/200/480/any')
}
<div>
<h1>Check my background image</h1>
</div>
instead of hex color code specify rgba and adjust a as required
background-color:rgba(255,0,0,0.5);
reference
Uhm,
background: rgba(0, 0, 0, 0.75);
does the job!