Добавление эффекта наложения непрозрачности для миниатюры с эффектом fancybox

Question

Я пытаюсь добавить эффект наведения на непрозрачность с помощью небольшого текста в миниатюру с эффектом 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;} 

Но это не имело никакого эффекта. Есть идеи?

Answer 1

Ваш css верен. Если он не работает для вас, вы либо не применили имя класса fade к своим изображениям, либо у вас есть браузер, который не поддерживает свойство css opacity.

Как @MaryMelody, размещенный в комментарии, этот JSFiddle имеет свой код с классом, применяемым к div (класс может применяться к любому элементу, чтобы он исчезал при зависании).