將不透明度懸停效果添加到帶有花哨效果的縮略圖

我試圖將帶有小文本的不透明度懸停效果添加到具有fancybox效果的縮略圖中。我不知道太多的jQuery，所以一個CSS方法將是可取的。將不透明度懸停效果添加到帶有花哨效果的縮略圖

我發現另一個論壇，上面寫着一類褪色的添加到我的img元素用的CSS：

.fade { 
    opacity: 1; 
    transition: opacity .25s ease-in-out; 
    -moz-transition: opacity .25s ease-in-out; 
    -webkit-transition: opacity .25s ease-in-out;} 

     .fade:hover { 
     opacity: 0.5;}

但是沒有效果。有任何想法嗎？

來源

2014-09-01 Adam Roberts

JSfiddle示例將有幫助，如果您有一個可視化參考。 – 2014-09-01 19:37:36

正常工作 - [TRY DEMO]（http://jsfiddle.net/b4hne6yt/） – Anonymous 2014-09-01 19:43:13

你的CSS是正確的。如果它不適用於您，您或者未將類名稱fade應用於圖像，或者您的瀏覽器不支持css屬性。

由於@MaryMelody在評論中發佈，此JSFiddle已將您的代碼與應用於div的類相關聯（此類可應用於任何元素以使其在徘徊時褪色）。

來源

2014-09-01 20:17:47 Chad

將不透明度懸停效果添加到帶有花哨效果的縮略圖

回答

相關問題