CSS come cambiare l'opacità del contenitore ma non il testo?

Question

Sono un newbie completo quando si tratta di HTML e CSS e sto costruendo il mio primissimo sito web. Voglio creare un'immagine che, al passaggio del mouse, visualizza il testo e sfuma l'immagine a una bassa opacità. Ho risolto tutte le dissolvenze e il cambio di opacità. Il mio unico problema è che il testo, che è contenuto all'interno dell'elemento che voglio sbiadire, si affievolisce e vorrei mantenerlo al 100% di opacità. Ho provato a impostare l'opacità su 1 per il testo, ma non sovrascrive il cambiamento di opacità del suo contenitore. Ad esempio, ho:

<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> 

E anche

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%; 
} 

Questo crea l'hover che voglio, ma non riesco a tenere l'opacità del testo al 100%.

Modifica: Grazie per aver fornito la soluzione rgba(), questo risolve il problema. Ho un altro caso dello stesso problema, tranne per il fatto che esiste un'immagine di sfondo invece di un colore di sfondo a tinta unita. C'è una soluzione simile?

Edit2: Problemi con dissolvenza in chiusura dopo la sostituzione del cambio di opacità con un trasparente separato .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

Dal momento che si sta utilizzando un colore di sfondo solido è possibile utilizzare rgba per modificare solo l'opacità dello sfondo/confini e non alterare il contenuto all'interno. Nel tuo esempio:

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()

Per le immagini si può realizzare una dissolvenza utilizzando :before e :after e dissolvenza l'opacità di questi elementi:

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