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

<img src="http://localhost/wordpress/wp-content/uploads/2020/07/All-the-fruits-that-day-were-poisend-.jpg" width="100px">

<img src="http://localhost/wordpress/wp-content/uploads/2020/07/All-the-fruits-that-day-were-poisend-.jpg" width="100px">

<img src="http://localhost/wordpress/wp-content/uploads/2020/07/All-the-fruits-that-day-were-poisend-.jpg" width="100px">

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?

Answer 1

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

<div id='wrap'>

    <img src="https://blog.54ka.org/wp-content/uploads/2012/04/Horse_Portrait_01_by_54ka-165x165.jpg"
        width="100px">

    <img src="https://blog.54ka.org/wp-content/uploads/2012/04/Horse_Portrait_01_by_54ka-165x165.jpg"
        width="100px">

    <img src="https://blog.54ka.org/wp-content/uploads/2012/04/Horse_Portrait_01_by_54ka-165x165.jpg"
        width="100px">

</div>

---

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

<div id='wrap'>

    <img src="https://blog.54ka.org/wp-content/uploads/2012/04/Horse_Portrait_01_by_54ka-165x165.jpg"
        width="100px">

    <img src="https://blog.54ka.org/wp-content/uploads/2012/04/Horse_Portrait_01_by_54ka-165x165.jpg"
        width="100px">

    <img src="https://blog.54ka.org/wp-content/uploads/2012/04/Horse_Portrait_01_by_54ka-165x165.jpg"
        width="100px">

</div>

---

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

<div id='wrap'>

    <img src="https://blog.54ka.org/wp-content/uploads/2012/04/Horse_Portrait_01_by_54ka-165x165.jpg"
        width="100px">

    <img src="https://blog.54ka.org/wp-content/uploads/2012/04/Horse_Portrait_01_by_54ka-165x165.jpg"
        width="100px">

    <img src="https://blog.54ka.org/wp-content/uploads/2012/04/Horse_Portrait_01_by_54ka-165x165.jpg"
        width="100px">

</div>

---

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

<div id='wrap'>

    <img src="https://blog.54ka.org/wp-content/uploads/2012/04/Horse_Portrait_01_by_54ka-165x165.jpg"
        width="100px">

    <img style="border: 5px solid blue;" src="https://blog.54ka.org/wp-content/uploads/2012/04/Horse_Portrait_01_by_54ka-165x165.jpg"
        width="100px">

    <img src="https://blog.54ka.org/wp-content/uploads/2012/04/Horse_Portrait_01_by_54ka-165x165.jpg"
        width="100px">

</div>