Change backgroundImage opacity css without changing text in it Opacity - html

Question

I have a div which has an background image set. There is some text in this div as well.
I want to have full opacity all the time. On mouse over the background image must change from 0.5 to 1 opacity.
#cover {
background: url(http://animalscamp.com/wp-content/uploads/2011/12/Grizzly-Bear-3.jpg);
width: 100%;
height: 100%;
filter: alpha(opacity=40);
opacity: 0.5;
}
#cover:hover {
opacity: 1;
}
<div class="col-12" id="cover">
<h2>ABC</h2>
<p>WELCOME USER</p>
</div>

Answer 1

Use a div inside a div to serve the background:
http://jsfiddle.net/0mgrt069/9/ (just fixed a typo)
<div class="col-12">
<div class="background"></div>
<h2>ABC</h2><p>WELCOME USER</p>
</div>
And CSS:
.background{
background:url(http://animalscamp.com/wp-content/uploads/2011/12/Grizzly-Bear-3.jpg);
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: .4;
width: 300px;
height: 200px;
}
.background:hover{
opacity:1;
}

Answer 2

Rather than adding an extra element, why don't you think of using pseudo elements? you could then 'alter' the background opacity on the hover:
Something like:
#cover:after {
content: "";
position: absolute;
height: 100%;
width: 100%;
top: 0;
background: url(http://animalscamp.com/wp-content/uploads/2011/12/Grizzly-Bear-3.jpg);
opacity: 0.5;
z-index:-2;
}
whilst making your #cover have a position: relative.
Live Demo
#cover {
position: relative;
background: width: 100%;
height: 100%;
}
#cover:hover:after {
opacity:1;
}
#cover:after {
content: "";
position: absolute;
height: 100%;
width: 100%;
top: 0;
background: url(http://animalscamp.com/wp-content/uploads/2011/12/Grizzly-Bear-3.jpg);
opacity: 0.5;
z-index:-2;
}
<div class="col-12" id="cover">
<h2>ABC</h2>
<p>WELCOME USER</p>
</div>

Answer 3

Try this fiddle. Set the opacity of text to original opacity of image or as per your requirement of opacity value for text.
http://jsfiddle.net/pradyumnaswain/Lpmkq6of/
#cover {
background: url(http://animalscamp.com/wp-content/uploads/2011/12/Grizzly-Bear-3.jpg);
width: 100%;
height: 100%;
filter: alpha(opacity=40);
opacity: 0.5;
}
#cover:hover {
opacity: 1;
}
h2 {
opacity: 0.5
}
p {
opacity: 0.5
}
<div class="col-12" id="cover">
<h2>ABC</h2>
<p>WELCOME USER</p>
</div>