<分区>
<分区>
我需要一个 png 图像的 CSS 悬停效果，而不使用两个图像。基本上，当用户将鼠标悬停在 png 图像上时，它会显示发光或其他效果，而不会突出显示整个框，而只会突出显示 png 图像。我试过使用 mask 效果，但这需要第二张图片，而且我有多个形状不同的对象，我想对所有对象使用一个 css 效果。
HTML
<div class="brighten pic">
<img src="imgs/bookcase-02.png">
</div>
CSS
/*DARKEN*/
.brighten img {
display: inline-block;
margin: 100px auto;
-webkit-filter: brightness(100%);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.brighten img:hover {
-webkit-filter: brightness(120%);
}
最佳答案
试试这个:
.brighten img {
opacity: 0.3;
}
.brighten img:hover {
opacity: 1;
}
关于html - PNG图像的CSS悬停效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22077712/