如何在悬停时的图像上方添加带有文本的着色蒙版

Question

希望在上图中达到效果。我有一堆svg图标。当用户将鼠标悬停在每个图像上时，图像的色调和白色文本对于每个图标都是唯一的。

此效果的最佳做法是什么？使图标成为背景图像？现在，它们是嵌入式svg。

Answer 1

分层图像和​​不可见的分层let list = JSON.parse(JSON.stringify(this.state.myList)); //I modify the list here this.setState({myList: list}); 。然后，在悬停时，使叠加层可见。

<div>

.col-sm-6 {
  min-height: 500px;
  background: lightgrey;
  text-align: center;
}

.image-wrap {
  display: inline-block;
  position: relative;
  width: 300px;
  height: 300px;
}

.image-wrap .overlay {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  color: white;
  font: 30px sans-serif;
  font-weight: bold;
  opacity: 0;
  transition: opacity .5s ease;
  background-color: #5fa1e1;
  padding-top: 100px;
  border-radius: 10px;
}

.image-wrap:hover .overlay {
  opacity: 0.9;
}

.menu-image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

Answer 2

只需将opacity: 0;放在图片悬停上，就可以选择SVG图片，请尝试以下代码：

.col-sm-6 {
  min-height: 500px;
  background: lightgrey;
  text-align: center;
}

.image-wrap {
  display: inline-block;
  max-width: 100%;
  position: relative;  
}

.image-wrap .overlay{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  color:white;
  opacity: 1;
  transition:opacity .5s ease;
  z-index: 0;
}

.image-wrap:hover .overlay {
  opacity: 0;
}

#image {
  position: absolute;
  left: 0;
  top: 0;
}
#text {
  z-index: 100;
  position: absolute;
  color: white;
  font-size: 24px;
  font-weight: bold;
  left: 0;
  top: 70px;
}

 <div class="col-sm-6">
    <a href="#" class="image-wrap">
      <img class="img-responsive" src="https://i.imgur.com/vgpoAdA.png" alt="" />
       <div class="overlay image">
        <img id="image" src="https://i.imgur.com/3ONfync.png" />
        <p id="text">
               Rebasement Remodel
        </p>
      </div>
    </a>
</div>