Weird hover effect

Я пытаюсь показать подпись на моих продуктах, когда вы наведите указатель мыши. Мне удается это получить, но черный не будет черным, как будто у меня есть какой-то белый фон поверх моего эффекта. Вы можете видеть, что there Weird hover effect

Вот CSS я добавил

.product: парить .reveal IMG { Непрозрачность: 1; z-index: 1; }

.reveal .hidden { 
    position: absolute; 
    z-index: -1; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    margin-top: -20px; 
} 

.reveal:hover .hidden { 
    z-index: 1; 
    opacity: 1; 
} 

.reveal .caption { 
    position: absolute; 
    top: 0; 
    display: table; 
    width: 100%; 
    height: 100%; 
    background: rgba(255, 255, 255, 1); 
    color: rgba(0, 0, 0, 1) !important; 
    font: 12px/1.4em sans-serif; 
    text-transform: uppercase; 
    letter-spacing: 0.3em; 
    text-align: center; 
} 

.reveal .hidden .caption .centered { 
    display: table-cell; 
    vertical-align: middle; 
}

Как вы думаете, что в качестве основных, как проблема Z-индекс, или это больше, как я его построил?

источник

2016-01-07 Alex DC

Вопросы, требующие помощи по коду, должны содержать кратчайший код, необходимый для его воспроизведения ** в самом вопросе **. Хотя вы указали ссылку на пример, если ссылка стала недействительной, ваш вопрос не будет иметь значения для других будущих пользователей SO с той же проблемой. –

Ваш '.caption' имеет сплошной фон и покрывает весь размер изображения. Сделайте фон полупрозрачным. – abluejelly

Кроме того: если вы абсурзируете что-то, то вы * вероятно * не должны использовать поля на нем, если у вас нет веских оснований; 'top: -20px;' будет иметь тот же эффект в вашем контексте, что и 'top: 0; Запас верхом: -20px; '. Только если что-то будет использовать ': auto' в качестве значения, а abs-pos'd (или если оно сделает очиститель анимации), то вы должны использовать поля для абс-pos'd-элементов. О, и: *** '! Important' HISS !! *** – abluejelly

Это потому, что у вас есть эффект hover: анимируйте .image-wrapper до opacity:0.5. Если вы установите .product-grid .image-wrapper {opacity:1 !important) (только для теста вы можете увидеть, что черный цвет черный.

Так что вы можете сделать?

ли эффект FADEOUT на .reveal > img. Таким образом .product-grid .image-wrapper останется opacity:1.

источник

2016-01-07 22:55:08

попробовать это

.reveal:hover .hidden { 
     z-index: 0; 
     opacity: 0.8;  

    }

источник

2016-01-07 22:58:47

Спасибо, Rich fiifi! –

отметьте меня как правильный ответ, если это поможет. спасибо :) –

-1

.image-wrapper:hover { 
    opacity: 1 !important; 
}

, который будет это исправить. При наведении он идет к 0.5, это будет ул о нем.

источник

2016-01-07 23:00:31 Draity

Обязательно *** '! important' HISS !! ***. Если ваше исправление полагается на использование '! Important', вероятность 99% - это взлом, который мог бы быть исправлен лучше. В этом случае отключить js-управляемую анимацию «непрозрачность». – abluejelly

Это правда, это быстрое решение. – Draity

Спасибо, Дрейф, он отлично работает для этой цели. –

Одна из проблем была .caption была того же размера, что и изображение, на котором оно было расположено, и имело значение 1.0 alpha background, означающее, что заголовок закрыл изображение полностью после того, как z-index позволил ему заглянуть вперед.

Другая проблема заключается в том, что js/jQ выполняет анимацию при опрокидывании. Просто добавьте код, добавив к нему обработчик hover. Если вы хотите, чтобы вы все еще затухали, положите базу z-index на свою подпись, чтобы она была естественным образом впереди и анимировала ее opacity до 100% на :hover. Это противоречит анимации непрозрачности всей плитки от 100% до 50% и переключению порядка укладки.

источник

2016-01-07 23:13:50 abluejelly

Weird hover effect

ответ

Смежные вопросы