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

try something like this

$(function() {
var $container  = $('#posts-wrapper'),
$lis    = $container.children('.posts'),
timeout;

$lis.on( 'mouseenter', function( event ) {

    var $li = $(this);
    clearTimeout( timeout );
    timeout = setTimeout( function() {
    if( $li.hasClass('active') ) return false;

    $lis.not( $li.removeClass('blur').addClass('active') )
        .removeClass('active')
        .addClass('blur');
        }, 65 );
});

$container.on( 'mouseleave', function( event ) {

  clearTimeout( timeout );
  $lis.removeClass('active blur');
 });                
});

and css

.blur {
  -webkit-filter: blur(10px);
  opacity: 0.4;
}
.active {
  opacity: 1;
}