對於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懸停效果

回答

相關問題