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:hover .posts {
    -webkit-filter: blur(10px);
}

jQuery

$(document).ready(function(){ 

    $(".posts").mouseover(function() { 
        $(this).css("-webkit-filter", "none"); 
    }); 

    $(".posts").mouseleave(function() {
        $(this).css("-webkit-filter", "blur(10px)"); 
    }); 

});

Josh Crozier · Answer 1 · 2013-11-10T02:45:25.617

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

@user2946744 Yep. Basically, all the divs are blurred when hovering over the parent, then you use the `:not` selector to prevent the one you are over from being styling... I wrote a different solution that doesn't involve `:not` as it isn't fully supported — Josh Crozier, Nov 11 '13 at 23:39

score 0 · Answer 2 · answered Nov 10 '13 at 02:32

Try

 $(".posts").mouseover(function () {
     $('.posts').css("-webkit-filter", "blur(10px)"); // added this to add blur to all images
     $(this).css("-webkit-filter", "none");
 });

 $(".posts").mouseleave(function () {
     $(this).css("-webkit-filter", "blur(10px)");
 });

score 0 · Answer 3 · answered Nov 10 '13 at 02:42

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

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

3 Answers3

Linked