Сделать родительский div webkit-фильтр не влияет на детей

Я использую очень причудливый фильтр веб-каротажа, чтобы сделать полутоновые изображения в черно-белом режиме, а при наведении на изображения становятся цветными.

Здесь фильтр

filter: none;
-webkit-filter: grayscale(0);
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;

Как вы можете видеть, существует даже свойство "переход", так что изображение имеет плавный переход затухания в полный цвет. Проблема, с которой я сталкиваюсь, заключается в том, что div, к которому я обращаюсь, также влияет на дочерний текст, расположенный внутри div, и превращая текст в оттенки серого. Это проблема, потому что текст должен быть белым, даже если он не зависает.

Я попытался отрицать фильтр с другим в дочернем тексте, но он, похоже, не работает... Проверьте скрипт

Fiddle http://jsfiddle.net/yMHm4/1/

Ответы

Ответ 1

Это не проблема наследования свойств, как вы думаете.

Работа с фильтрами делает невозможным исправление изменений атрибутов в CSS: элемент, подверженный фильтру, визуализируется, все дочерние элементы отображаются, а затем результат (в виде изображения) применяется.

Итак, единственные альтернативы:

1) Измените HTML, как предложил Lowkase

2) В вашем случае кажется, что все, что вы хотите сделать серым, - это фоновое изображение. В этом случае вы можете оставить HTML как есть, отобразить изображение в псевдоэлементе и применить фильтр к этому псевдо-элементу.

CSS

.cell{
    opacity:0.7;
    width:420px;
    height:420px;
    transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -webkit-transition: opacity .3s ease-in-out;
}

.A1 {
    position: relative;
}
.A1:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-image:url('http://i.imgur.com/NNKxZ5R.jpg');
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: blur(15px); /* Google Chrome, Safari 6+ & Opera 15+ */ 
    z-index: -1;
}

#text {
    color:#ffffff;
    text-align:center;
    font:18px sans serif;
    text-decoration:none;
}
.cell:hover {
    opacity:1.0;
}

.A1:hover:before {
    filter: none;
    -webkit-filter: grayscale(0);
    transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -webkit-transition: opacity .3s ease-in-out;
}

fiddle

Я также изменил фильтр на размытие, чтобы сделать его более понятным, чтобы фильтр не подвергался воздействию текста. Так как у вас был также набор непрозрачности, текст по-прежнему выглядел сероватым только потому, что вы видели серый под ним.

Добавлен пример использования фильтра яркости (для webkit)

демо 2

Ответ 2

У вас было несколько ошибок HTML с вашим br, они должны быть br/, not/br.

Следующее решение выводит текстовый контейнер из div и помещает его как элемент с абсолютным расположением:

http://jsfiddle.net/yMHm4/3/

#text {
    position:absolute;
    top:10px;
    left:25%;
    color:#ffffff;
    text-align:center;
    font:18px sans serif;
    text-decoration:none;
}

<div id="container">
    <div id="row">
        <div class="cell A1"></div>
        <div id="text">
            <b>SPINDRIFT KIOSK</b>
            <br/>
            Digital Collage
            <br/>
            <i>Mikey</i>
        </div>        
    </div>
</div>

Вероятно, вы могли бы использовать "не" селекторов в своем CSS, но я не уверен, насколько они дружелюбны друг к другу. Это решение - более простой способ сделать это.