对于PNG图像的CSS悬停效果

我需要一个不使用两个图像的png图像的CSS悬停效果。基本上，当用户悬停在PNG图像上时，它会显示辉光或其他效果，而不会突出显示整个盒子，而只是显示png图像。我试过使用遮罩效果，但需要第二个图像，并且我有多个不具有相同形状的对象，并且我想为所有图像使用一种CSS效果。对于PNG图像的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%); 
}

来源

2014-02-27 user3361913

*我需要一个CSS悬停效果的PNG *订购我们将无法帮你取的代码，尝试第一，张贴一些代码，你会得到一些帮助 –

变化悬停时图像的不透明度。 – sudhnk

你想要做的JQuery这样的事情。确保你在调用JQuery库。我定义为从谷歌：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>

那么你想要做这样的事情：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".YourImageName").mouseenter(function() { 
      $(this).css('box-shadow', '0 0 2px #888'); 
     }); 
     $(".YourImageName").mouseleave(function() { 
      $(this).css('box-shadow', 'none'); 
     }); 
    } 
</script>

这给你周围的边缘阴影，你可以改变颜色或完全更改CSS以更好地满足您的需求。

如果您向我们提供了您目前使用的代码，将来会更有帮助，因此我们可以更好地了解您的需求。此代码取自实时网络使用并更改为适用于您的方案。你将不得不将类名更改为你的名字。希望这可以帮助！

来源

2014-02-27 19:09:43 brharrison

试试这个：

.brighten img { 
    opacity: 0.3; 
} 

.brighten img:hover { 
    opacity: 1; 
}

来源

2014-02-27 20:42:13 mmhyamin

Thanx的反馈。我实际上不希望图像褪色，我希望图像始终具有100％的不透明度，但悬停时亮度为20％。还有没有背景可以只突出显示PNG。 – user3361913

对于PNG图像的CSS悬停效果

回答

相关问题