Question

<div class="col-lg-6">
    <ul>
        <li><a target="_blank" href="http://stackoverflow.com/users/6634978/rabin-lama"><img src="images/stackoverflow.png" alt="Upwork" class="img-responsive" style="width: 35px;display:inline;"></a></li>
    </ul>
</div>

这是我正在使用的图片：

我想要的是，当我将鼠标悬停在png图像上时，这是一个彩色叠加层。此外，覆盖层应该仅覆盖图像的可见部分。我该怎么做？

Answer 1

使用特定的width和height作为图片的父级。

li a {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  position: relative;
  overflow: hidden;
}

li a img {
  width: 100%;
  height: auto:
  vertical-align: top;
}

li a:after:hover {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.2);
}

Answer 2

你可以试试，

li a{
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%:
  background-color: #CE6F2D;
  position: relative;
}
li a:hover::after{
  content: "";
  background-color: rgba(0,0,0,0.5);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

Answer 3

如果你只想改变图像的颜色（并在其上做一些叠加），我认为你应该能够做到这一点：

.hoverOverlay:hover img {
 background-color: rgba(0,0,0,0.1);
}

然后，当然，添加＆＃34; .hoverOverlay＆＃34;给你的形象分类。

Answer 4

您需要使用CSS为li' img和pseudo tags :hover设置此项。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<style type="text/css">
li {
    list-style-type:none;
    width:35px;
    height:35px;
}
li img {
    width:100%;
    vertical-align:top;
}

li:hover {
    border-radius:17.5px;
    background-color:red;
}
li:hover img {
   display:none;
}
</style>
<head>
    <title></title>
</head>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">


<body>
    <div class="col-lg-6">
        <ul class="social-icons1">
            <a target="_blank" href="http://stackoverflow.com/users/6634978/rabin-lama">
                <li>
                    <img src="https://i.stack.imgur.com/ej4Lf.png" alt="Upwork" class="img-responsive">
                </li>
           </a>
        </ul>
    </div>
</body>

</html>

对此进行了测试并且工作正常。祝你好运。

在Jfiddle上进行测试：https://jsfiddle.net/0ek5ue85/2/

如何在悬停时在图像中添加彩色叠加层？

4 个答案: