CSS how to change opacity of container but not text?

Question

I'm a complete newbie when it comes to HTML and CSS, and just create my first website. I want to create an image that, when frozen, displays text and reduces the image to a lower opacity. Everything is worked out for me, as well as a change in opacity. My only problem is that the text that is contained within the element that I want to disappear also disappears, and I would like to keep it at 100% opacity. I tried to set opacity 1 for the text, but does not cancel the change in the transparency of the 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

 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 freeze that I want, but I cannot keep the text transparency 100%.

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

Edit2: problems with fading changes after replacing opacity changes 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; } 

Answer 1

Since you are using a solid background color, you can use rgba only to change the opacity of the background / borders and not affect the contents 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 fade with :before and :after and fade the opacity of these 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