I am currently facing an issue with my webpage where I have 3 images displayed. I have implemented an event listener to detect clicks on the images, and once a click occurs on one of them, I want everything else on the page to become blurred, including the other two images.
If anyone can offer assistance or guidance on how to achieve this effect, it would be greatly appreciated. Thank you.
function showInfo() {
const images = document.getElementsByTagName("img");
const container = document.getElementsByClassName("container");
for (let i = 0; i < images.length; i++) {
images[i].addEventListener("click", (evt) => {
// logic to blur other images here
})
}
}
showInfo();