移除懸停時的圖像疊加

Question

我正在嘗試在懸停時刪除圖像覆蓋。 我有以下代碼在懸停時添加了一個疊加層，但是我希望它在不懸停時具有不透明性，並在懸停時消除該不透明性。

jQuery的：

revapi1.on('revolution.slide.onloaded', function() {

revapi1.find('li').each(function() {

var slide = jQuery(this);
if(slide.find('.slidelink').length) {

slide.find('.slotholder').addClass('custom-hover');

}

});
});

CSS：

.rev_slider .custom-hover {

-webkit-transition: opacity 0.5s ease-out;
-moz-transition: opacity 0.5s ease-out;
-o-transition: opacity 0.5s ease-out;
transition: opacity 0.5s ease-out;

} 

.rev_slider:hover .custom-hover {

opacity: 0.5;

}

我嘗試了以下方法。 它可以工作，但是我無法使其與上面的Jquery代碼一起工作。 小提琴

HTML：

<div class="wrap">
<figure class="tint">
  <img src="http://cdn.impressivewebs.com/2011-11/greece001.jpg" alt=""   width="400" height="260" />
 </figure>
 </div>    

Answer 1

如果要對不透明度執行CSS轉換，則需要確保還具有默認的不透明度屬性。 所以像這樣：

.rev_slider .custom-hover {
    opacity: 0;
    -webkit-transition: opacity 0.5s ease-out;
    -moz-transition: opacity 0.5s ease-out;
    -o-transition: opacity 0.5s ease-out;
    transition: opacity 0.5s ease-out;
} 

.rev_slider:hover .custom-hover {
    opacity: 0.5;
}