When hover over img, all other images blur using CSS :not(:hover)

Question

I'm trying to work out how to apply a blur effect on all other images when one image has been hovered:

img:not(:hover) {
  filter: blur(3px);
  -webkit-transition: 400ms ease 100ms;
  -moz-transition: 400ms ease 100ms;
  transition: 400ms ease 100ms;
}

I was hoping that when no image is currently hovered all images would be rendered normally (i.e. without the blur effect). But this does not seem to be the case because at the moment, everything is blurred out.

How can I do achieve this effect with CSS?

user_10968134 · Answer

This trick works when you have a wrap element.

In this way you give the effect of all photos in the wrap except the one on which it is :hover

CSS Short version:

#wrap img {
    -webkit-transition: 400ms ease 100ms;
    -moz-transition: 400ms ease 100ms;
    transition: 400ms ease 100ms;
}

#wrap:hover img:not(:hover) {
    filter: blur(3px);
}

CSS Old-Style version:

Do the same as above but with more CSS code

#wrap img {
    -webkit-transition: 400ms ease 100ms;
    -moz-transition: 400ms ease 100ms;
    transition: 400ms ease 100ms;
}

#wrap:hover img {
    filter: blur(3px);
}

#wrap img:hover {
    filter: blur(0px);
}

JS version 1:

When there should be a wider distance between the objects, it is better to use JS

var wrp = document.getElementById('wrap');
var img = wrp.getElementsByTagName('img');
for (var i = 0; i < img.length; i++) {
    img[i].addEventListener("mouseover", function () { setEffect(this); });
    img[i].addEventListener("mouseout", resEffect);
};

function setEffect(el) {
    for (var i = 0; i < img.length; i++) {
        img[i].setAttribute('style', 'filter: blur(3px);');
    };
    el.removeAttribute('style');
}

function resEffect() {
    for (var i = 0; i < img.length; i++) {
        img[i].removeAttribute('style');
    };
}

#wrap img {
    margin: 0 30px;

    -webkit-transition: 400ms ease 100ms;
    -moz-transition: 400ms ease 100ms;
    transition: 400ms ease 100ms;
}

JS version 2:

Do the same as above "JS version 1", but retains the inline style on the image. This script preserves the default inline style of the images and adds the effect to it!

var wrp = document.getElementById('wrap');
var img = wrp.getElementsByTagName('img');
for (var i = 0; i < img.length; i++) {
    img[i].addEventListener("mouseover", function () { setEffect(this); });
    img[i].addEventListener("mouseout", resEffect);
};

function setEffect(el) {
    for (var i = 0; i < img.length; i++) {
        img[i].style.filter = 'blur(3px)';
    };
    el.style.filter = null;
}

function resEffect() {
    for (var i = 0; i < img.length; i++) {
        img[i].style.filter = null;
    };
}

#wrap img {
    margin: 0 30px;

    -webkit-transition: 400ms ease 100ms;
    -moz-transition: 400ms ease 100ms;
    transition: 400ms ease 100ms;
}

user_12996855 · Answer

You may even incorporate javaScript code:-

Html

adding id to all img

JavaScript

(() => {
  let allImgElement = document.querySelectorAll('img')

  allImgElement.forEach(img => {
    // handle when mouse over (blurring other images)
    document.getElementById(img.id).addEventListener("mouseover", () => {
      allImgElement.forEach(imgBlur => {
        if(imgBlur.id !== img.id) {
          document.getElementById(imgBlur.id).classList.add("imgBlur")
        }
      })
    })
  
    // handle when mouse out (unblur other images)
    document.getElementById(img.id).addEventListener("mouseout", () => {
      allImgElement.forEach(imgUnblur => {
        if(imgUnblur.id !== img.id) {
          document.getElementById(imgUnblur.id).classList.remove("imgBlur")
        }
      })
    })
  })
})()

3.Css

.imgBlur {
  
 filter: blur(3px);
 
 -webkit-transition: 400ms ease 100ms;
 -moz-transition: 400ms ease 100ms;
 transition: 400ms ease 100ms;
}

(() => {
let allImgElement = document.querySelectorAll('img')

allImgElement.forEach(img => {
    // handle when mouse over (blurring other images)
    document.getElementById(img.id).addEventListener("mouseover", () => {
    allImgElement.forEach(imgBlur => {
      if(imgBlur.id !== img.id) {
        document.getElementById(imgBlur.id).classList.add("imgBlur")
      }
    })
  })
  
  // handle when mouse out (unblur other images)
  document.getElementById(img.id).addEventListener("mouseout", () => {
    allImgElement.forEach(imgUnblur => {
      if(imgUnblur.id !== img.id) {
        document.getElementById(imgUnblur.id).classList.remove("imgBlur")
      }
    })
  })
})
})()

.imgBlur {
  
 filter: blur(3px);
 
 -webkit-transition: 400ms ease 100ms;
 -moz-transition: 400ms ease 100ms;
 transition: 400ms ease 100ms;
}

When hover over img, all other images blur using CSS :not(:hover)

2 Answers