Удаление наложения изображений при зависании

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 выше. Fiddle

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; 
}