Resaltar una imagen poniendo en blanco y negro las otras imagenes

[quico5]

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

[petit89]

has corregido esto?

Código HTML:

<div id='croll-wrapper'>
 

dice croll en lugar de scroll

[quico5]

Disculpame, no es el HTML original, el cual tiene más etiquetas

Código HTML:

<div id='scroll-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> 

[quico5]

No hay manera...

Si estamos en "#scroll-wrapper:hover" y en ".has-post-thumbnail:hover" entonces todo lo demás "sera cambiado"

Código:

#scroll-wrapper:hover .has-post-thumbnail:hover:not(.has-post-thumbnail:hover) img {
     filter: blur(1.5px);
    opacity: .75;
}