CSS how to change opacity of container but not text?

Question

I am a complete newbie when it comes to HTML and CSS and just building my very first website. I want to create an image that, when hovered, displays text and fades the image to a lower opacity. I've got the fade all worked out, as well as the opacity change. My only issue is that the text, which is contained within the element I want to fade, also fades and I would like to keep it at 100% opacity. I have tried setting opacity to 1 for the text but it does not override the opacity change of its container. For example, I have:

<div class="textbox">

<p class="boxtext">This is the text that will eventually go inside the box. It is blah lljsd iofu isduf iou eiosu dfi eiou sdiofu ioe soidfu oidu foiu foisu doiu eoiusodidfu oei osidfuosdiu ieu oisduf oiueoisu dfoi oiu soifu iod fioeo dfs.</p>

</div>

And also

div.textbox {
background-color: white;
margin-left: 2.5vw;
border: 2px solid lightgray;
width: 15vw;
height: 600px;
float: left;
}

 div.textbox:hover {
background-color: lightgray;
border: 2px solid lightgray;
opacity: 0.5;
}

p.boxtext {
margin: 5% 5%;
}

This creates the hover that I want, but I can't keep the text opacity at 100%.

Edit: Thank you for providing the rgba() solution, this solves the problem. I have another case of the same problem except that there is a background image instead of a solid background color. Is there a similar workaround?

Edit2: Issues with fade breaking after replacing opacity change with a separate transparent .png.

a#imglink1 {
background-image: url('https://www.profilesinhistory.com/wp-content/uploads/2012/11/Apollo-11-NASA-Photograph-Signed-Neil-Armstrong-Michael-Collins-Buzz-Aldrin-200x200.jpg');
width: 200px;
height: 200px;
float: left;
-o-transition: 0.5s;
-ms-transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
transition: 0.5s;
}

a#imglink1:hover {
background-image: url('../images/apollo_transparent.png');
-o-transition: 1s;
-ms-transition: 1s;
-moz-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
}

a#imglink1:hover p {
visibility: visible;
}

just change the background colour to lighter shade of gray and dont worry about the opacity. — shammelburg, Jun 05 '13 at 15:31
So to clarify, you want a div with a background image that fades out when you hover on it, but the text inside it remains at full opacity? This will be problematic as opacity is relative to the parent. If the parent div has an opacity of 0.5, and you set the child element to an opacity of 1, you effectively end up with 1 * 0.5 = 0.5. In other words, a child can't be MORE opaque than its parent. As a workaround, you could instead use an img element rather than CSS OR get a bit clever: http://jsfiddle.net/gtHTv/ — Dre, Jun 05 '13 at 17:12

Matt Berkowitz · Answer 1 · 2013-06-05T17:32:13.490

13

Since you're using a solid background color you can use rgba to only change the opacity of the background/borders and not affect the content inside. In your example:

div.textbox:hover {
    background-color: rgba(222,222,222,.5);
    border: 2px solid rgba(222,222,222,.5);
}

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgba()

For images you can accomplish a fade using :before and :after and fading the opacity of those elements:

a#imglink2 {
    width: 200px;
    height: 200px;
    float: left;
    position: relative;
}
a#imglink2 p
{
  position: relative;
  z-index:2;
}

a#imglink2:before
{
background-image: url('http://images2.layoutsparks.com/1/239061/welcome-orange-vintage-design.gif');
  width: 200px;
  height: 200px;
  position: absolute;
  top:0; left:0;
  content:'';
  z-index:1;
  opacity:1;
  transition: .3s opacity linear;
}
a#imglink2:after
{
    background-image: url('http://images.all-free-download.com/images/graphicmedium/vintage_christmas_background_32295.jpg');
    width: 200px;
    height: 200px;
    position: absolute;
    top:0; left:0;
    content:'';
    z-index:1;
    opacity:0;
    transition: .3s opacity linear;
}
a#imglink2:hover:before
{
    opacity:0;
}
a#imglink2:hover:after
{
    opacity:1;
}

http://codepen.io/seraphzz/pen/ikJqB

edited Jun 05 '13 at 17:32

answered Jun 05 '13 at 15:27

Matt Berkowitz

975
6
13

That is great, thanks! I actually have another case of the same problem, however the background in that section will be an image. Is there a similar fix for a case where I am using an image as a background? – user2456290 Jun 05 '13 at 15:55
@user2456290 In that case, what you can do is modify the image file so that the image itself includes the necessary transparency. I myself have used this technique before. This link also includes a different trick that I haven't used before: http://css-tricks.com/snippets/css/transparent-background-images/ – Sildoreth Jun 05 '13 at 16:05
Just to complete the info, there's also a `hsla()` function to do it. – pzin Jun 05 '13 at 16:08
Looks like rgba() isn't compatible with IE8&7(WinXP): http://stackoverflow.com/questions/3975688/css-background-opacity-with-rgba-not-working-in-ie-8 – Stano Jun 05 '13 at 16:16
So I took out the bit of css that changed the opacity of my image and replaced the hover image background url with the transparent .png. For some reason this broke my fade though. Any ideas? I'll place the css in the original post in an edit. – user2456290 Jun 05 '13 at 16:33
For legacy IE yo can use `filter:progid:DXImageTransform.Microsoft.Gradient` which accepts partially transparent colors, just fade from a color to itself (http://msdn.microsoft.com/en-us/library/ms532997(v=vs.85).aspx) – Matt Berkowitz Jun 05 '13 at 16:33
Can you post a fiddle or link to the code so I can see what's happening, that would make it easier to diagnose. – Matt Berkowitz Jun 05 '13 at 16:39
I apologize if my html and css are messy, not optimized, or wrong; as I said I am just starting out. Thank you for all the help! – user2456290 Jun 05 '13 at 16:50
I just noticed something interesting, the fade is actually working the way I want it to in Chrome, but not firefox. – user2456290 Jun 05 '13 at 17:13
The reason the transition isn't smooth for images is because `backgound-image` isn't a supported transition-property (see http://www.w3.org/TR/css3-transitions/#animatable-css). In order to do a smooth image to image fade you'll need to add some additional html and fade the opacity of 2 images layered on top of each other – Matt Berkowitz Jun 05 '13 at 17:17
Actually with some use of `:before` and `:after` you can get it working without extra html! Enjoy ;) http://codepen.io/seraphzz/pen/ikJqB – Matt Berkowitz Jun 05 '13 at 17:25

CSS how to change opacity of container but not text?

1 Answers1

Linked