CSS парения эффект не вызывает на текст

Question

Вот jsfiddle проекта я работаю над http://jsfiddle.net/bhbLa/

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

Проблема, с которой я сталкиваюсь, заключается в том, что если вы прокрутите самый центр изображения, где непрозрачность: 0; текст, это не считается зависанием над изображением, что возвращает изображение в оттенки серого.

Я ломал мой мозг весь день для этого, и я не знаю, почему

div.text:hover #cell { opacity:1; }

не исправляет эту проблему.

Answer 1

Если я правильно понимаю, вам нужно настроить эффект наведения на родителя изображения, а не на изображение.

Что сделал ваш старый селектор, было нацелено только на эффект наведения , если курсор над изображением. Хорошо, когда вы нависаете над текстом, который является элементом уровня блока, вы на самом деле больше не зависаете над элементом img и поэтому потеряете его эффект зависания.

Вот CSS я изменил:

div.cell:hover img { 
    filter: none; 
    -webkit-filter: grayscale(0); 
    transition: opacity .2s ease-in-out; 
    -moz-transition: opacity .2s ease-in-out; 
    -webkit-transition: opacity .2s ease-in-out; 
    opacity:1.0; 
} 

Наконец, скрипку: Demo