CSS vznášajúci efekt, ktorý nespúšťa text - html, css, css3, hover

Tu je časť projektu, na ktorom pracujem http://jsfiddle.net/bhbLa/

Mám obrázok nastavený v odtieňoch sivej pomocou nejakého CSS, s textom umiestneným nad obrázkom. Po umiestnení kurzora na obrázok sa vypne stupnica šedej a text sa skryje. It "s takmer presne to, čo chcem.

Problém je v tom, že ak posúvate samý stred obrázka, v ktorom je opacity: 0; text, nepovažuje sa to za vznášanie sa nad obrazom, ktorý obracia obrázok späť do odtieňov šedej.

Celý deň som na to strčil mozog a neviem prečo

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

nerieši tento problém.

odpovede:

Ak rozumiem správne, musíte zacieliť vznášajúci sa efekt na rodiča obrázka a nie na samotný obrázok.

To, čo robil váš starý selektor, bolo iba zacielenie na vznášajúci sa efekt ak kurzor je nad obrázkom. Keď sa vznášate nad textom, ktorý je prvkom na úrovni bloku, už sa nad týmto img elementom už nehýbete a stratíte tak jeho efekt.

Tu je css, ktorý som zmenil:

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

A nakoniec, husle: demonštrácie