When hover a image, the rest of images changes the filter

Question

I have 10 images, and when I hover one, I want the 9 remaining to change the filter.

This is what I have:

CSS

#posts-wrapper:hov         


        

Answer 1

Using pure CSS, you can do something like this:

jsFiddle example ... and jsFiddle example where blur isn't supported.

#parent > div {
    width:100px;
    height:100px;
    border:1px solid black;
    float:left;
    margin:5px;
}
#parent:hover > div:not(:hover) {
    -webkit-filter: blur(10px);
}

Sadly, the :not selector isn't fully supported.. you could also use something like this instead:

jsFiddle example .. and again, another jsFiddle example where blur isn't supported.

#parent > div {
    width:100px;
    height:100px;
    border:1px solid black;
    float:left;
    margin:5px;
}
#parent:hover > div {
    -webkit-filter: blur(10px);
}
#parent:hover > div:hover {
    -webkit-filter:blur(0);
}