El siguiente CSS me gustaría llevarlo un poco más allá haciendo que solo funcione cuando estoy dentro de algún '.has-post-thumbnail' de tal forma que si estoy entre 2 divs el efecto no se aplique
Código:
#scroll-wrapper:hover img:not(:hover) {
-webkit-filter: grayscale(1);
filter: grayscale(1);
opacity: .75;
}
Código HTML:
<div id='croll-wrapper'>
<div class='has-post-thumbnail'><img></div>
<div class='has-post-thumbnail'><img></div>
<div class='has-post-thumbnail'><img></div>
<div class='has-post-thumbnail'><img></div>
<div class='has-post-thumbnail'><img></div>
<div class='has-post-thumbnail'><img></div>
</div>
He probado así pero hace exactamente lo mismo, cuando no tengo hover en ningún '.has-post-thumbnail' no debería ponerme todos en blanco y negro, en su lugar mantener todos en color
Código:
#scroll-wrapper:hover .has-post-thumbnail:not(:hover) img {
-webkit-filter: grayscale(1);
filter: grayscale(1);
opacity: .75;
}
En este ejemplo funciona al estar entre dos imágenes dejándolas con algo de margin, no debería ser tan difícil de conseguir:
http://codepen.io/ianfarb/pen/EJunm