Question

我正在为我的项目创建简单的动画。悬停在图像上后，我得到了这个效果：http://imgur.com/a/L3mwF。问题是我正在将渐变前景的不透明度从0更改为0.8。它还改变了图标和文字的不透明度。我想将渐变不透明度更改为0.8，将图标+文本更改为1。这是我的HTML代码

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

这是我的sass代码

.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

我没有看到您的图标，但如果我了解您的目标，请在元素上使用opacity: 1，并使用rgba()来控制渐变不透明度。

＆＃13;

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

＆＃13;

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

＆＃13;

改变div不透明度但不改变其内部

1 个答案: