Change divs opacity but not its inside

Question

I'm creating simple animation for my project. After hovering on image I get this effect: https://i.stack.imgur.com/AIoAh.jpg. 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;
      }
    }
}

score 0 · Accepted Answer · answered Jun 16 '17 at 15:13

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>

Change divs opacity but not its inside

1 Answers1