Question

我正在尝试创建带有文本的图像，但是当它徘徊时，图像的亮度会下降，但不会影响文本。我可以仅使用CSS来实现吗？

@mixin easeOut {
  transition: all 0.3s ease-out;
}

.team-pics {
  display: flex;
  flex-wrap: wrap;
  div {
    width: 33%;
    img {
      display: block;
      width: 100%;
      padding: 1rem;
      @include easeOut;
    }
    .team-pic-caption {
      opacity: 0;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 1rem;
      @include easeOut;
      color: #fff;
    }
    &:hover {
      filter: brightness(.5);
      .team-pic-caption {
        opacity: 1;
      }
    }
  }
}

<div class="team-pics">
  <div>
    <img src="https://images.unsplash.com/photo-1515550833053-1793be162a45?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=31a23f7d7e8b0e43153da6565aa7157e&auto=format&fit=crop&w=500&q=60" />
    <div class="team-pic-caption">
      <h3>Josh Garwood</h3>
      <p>Co-Founder and Technical Director</p>
    </div>
  </div>
  <div>
    <img src="https://images.unsplash.com/photo-1513267096918-a2532362a784?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f971c866a1e22a858a0c2ea72274838c&auto=format&fit=crop&w=500&q=60" />
    <div class="team-pic-caption">
      <h3>Jason Benjamin</h3>
      <p>Co-Founder and Marketing Director</p>
    </div>
  </div>
</div>

https://codepen.io/yubind/pen/mGWQBr

Answer 1

我为您提供一些潜在的解决方案

这是第一个（背景会模糊，但文本将保持不变，代码当然可以满足您的需求）：

#imgtext {
  position: relative;
  float: left;
  width: 300px;
  padding: 30px;
  margin: 15px;
  border-radius: 20px;
  height: 150px;
  overflow: hidden;
}

#imgtext:after {
  content: '';
  display: block;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: url(https://upload.wikimedia.org/wikipedia/en/e/e4/Blank_cd.png) no-repeat center;
  background-size: cover;
}

#imgtext:hover:after {
  -webkit-filter: blur(5px);
}

p {
  font-size: 3em;
  color: red;
  text-align: center;
}

<div>
    <div id="imgtext">
      <p>Hello<p>
    </div>
</div>

this fiddle中有另一个轮廓（当图像淡出时，文本仅在悬停时显示）

.wrapper {
  position: relative;
  padding: 0;
  width: 150px;
  display: block;
}

.text {
  position: absolute;
  top: 0;
  color: #f00;
  background-color: rgba(255, 255, 255, 0.8);
  width: 150px;
  height: 150px;
  line-height: 1em;
  text-align: center;
  z-index: 10;
  opacity: 0;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}

.text img {
  top: 20px;
  position: relative;
}

.text:hover {
  opacity: 1;
}


}
img {
  z-index: 1;
}

<a href="#" class="wrapper">
  <span class="text">      
  
  <img src="http://prologicit.com/wp-content/uploads/2012/07/160px-Infobox_info_icon_svg-150x150.png" width="30" height="30"><br><br><br>  

       
          "Photo"<br>
          Made:1999<br>
          By: A. Miller<br>
          150x150px
          
         </span>
  <img src="http://lorempixel.com/150/150">

</a>

我喜欢animate opacity fiddle，但这可能超出了您想要的...

悬停在图像上的文本受滤镜亮度的影响

1 个答案: