Change divs opacity but not its inside [duplicate] - html

Question

This question already has answers here:
I do not want to inherit the child opacity from the parent in CSS
(18 answers)
Closed 5 years ago.
I'm creating simple animation for my project. After hovering on image I get this effect: http://imgur.com/a/L3mwF.
The thing is I'm changing opacity for the gradient foreground from 0 to 0.8. It also chenges opacity for the icon and text. I want to change gradient opacity to 0.8 and icon+text to 1.
Here's my html code
<div class="col-xs-12 col-sm-4 wrapper">
<div class="about__gallery--bg">
</div>
<div class="about__gallery--top">
<div class="row inner">
<img class="img-responsive" src="./img/pictograms/aboutus_pic1_icon.png" alt="">
<span>Super team</span>
</div>
</div>
<div class="about__gallery__img about__gallery__img--1">
</div>
</div>
And here's my sass code
.about__gallery {
&__img {
width: 380px;
height: 250px;
opacity: 1;
z-index: 50;
&--1 {
background: url('../img/aboutus_pic1.png');
background-size:cover;
}
}
&--bg {
width: 380px;
height: 250px;
opacity: 1;
z-index: -100;
position: absolute;
background-color: $color-blue;
}
&--top {
width: 380px;
height: 250px;
opacity: 0;
z-index: 90;
position: absolute;
background: linear-gradient($color-red, $color-yellow);
img{
display: block;
margin:auto;
margin-top: 15%;
}
span{
text-transform: uppercase;
font-weight: bold;
color:white;
display:block;
}
&:hover {
opacity: 0.8;
margin-top: -15px;
margin-left: -15px;
margin-bottom: 15px;
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
-ms-transition: all 0.7s ease-out;
-o-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
&:hover + .about__gallery__img {
margin-bottom: 15px;
margin-top: -15px;
margin-left: -15px;
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
-ms-transition: all 0.7s ease-out;
-o-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
}
}

Answer 1

I'm not seeing your icons, but if I understand what you're going for, use opacity: 1 on the element, and rgba() to control the gradient opacity.
.about__gallery__img {
width: 380px;
height: 250px;
opacity: 1;
z-index: 50;
}
.about__gallery__img--1 {
background: url("http://kenwheeler.github.io/slick/img/lazyfonz2.png");
background-size: cover;
}
.about__gallery--bg {
width: 380px;
height: 250px;
opacity: 1;
z-index: -100;
position: absolute;
background-color: blue;
}
.about__gallery--top {
width: 380px;
height: 250px;
opacity: 0;
z-index: 90;
position: absolute;
background: linear-gradient(rgba(255, 0, 0, 0.8), rgba(0, 255, 255, 0.8));
}
.about__gallery--top img {
display: block;
margin: auto;
margin-top: 15%;
}
.about__gallery--top span {
text-transform: uppercase;
font-weight: bold;
color: white;
display: block;
}
.about__gallery--top:hover {
opacity: 1;
margin-top: -15px;
margin-left: -15px;
margin-bottom: 15px;
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
-ms-transition: all 0.7s ease-out;
-o-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
.about__gallery--top:hover + .about__gallery__img {
margin-bottom: 15px;
margin-top: -15px;
margin-left: -15px;
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
-ms-transition: all 0.7s ease-out;
-o-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-12 col-sm-4 wrapper">
<div class="about__gallery--bg">
</div>
<div class="about__gallery--top">
<div class="row inner">
<img class="img-responsive" src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="">
<span>Super team</span>
</div>
</div>
<div class="about__gallery__img about__gallery__img--1">
</div>
</div>