代码之家 › 专栏 › 技术社区 › John Gerard

如何在悬停时在图像上添加带文本的着色遮罩

hover svg css html javascript

-1

John Gerard · 技术社区 · 7 年前

my image

希望达到上图的效果。我有很多svg图标。当用户将鼠标悬停在每个图像上时,图像的色调和白色文本将显示为每个图标唯一的。

这种效果的最佳实践是什么?让图标成为背景图像?现在它们是内联svg。

1 回复 | 直到 7 年前

1

2

Paul LeBeau 7 年前

将图像和不可见覆盖层分层 <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;
}

<div class="col-sm-6">
  <a href="#" class="image-wrap">
    <img class="menu-image" src="https://i.imgur.com/vgpoAdA.png" />
    <div class="overlay">Basement<br/>Remodel</div>
  </a>
</div>

2

0

Amine KOUIS 7 年前

只是把 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>