Blur Background When Popup Image

Question

I'm trying to blur the background when I click on an image and it popup. I already have it where it blurs a section of the page. However, you can see anything that is outside of that section not blur-out.

CSS

.content2#blur.active{ 
filter: blur(20px);
pointer-events: none;
user-select: none;}

#popup{  /*NEW*/
position: fixed;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
padding: 50px;
visibility: hidden;
opacity: 0;
transition: 0.5s;
}

#popup.active{ 
width: 650px;
top: 53%;
visibility: visible;
opacity: 1;
transition: 0.5s;
}

HTML


    
        Title
        Description.
    
    
        
        
            
            
            Image Description
            
        
        
   
   
        
        
   




    Copyright

JavaScript

function toggle(){
var blur = document.getElementById('blur');
blur.classList.toggle('active');
var popup = document.getElementById('popup');
popup.classList.toggle('active');
}

I tried adding the same id="blur" to the footer but the problem is that it only works for one

. I also tried adding a separate css code for let say `class="footer" but it doesn't work.

.footer#blur.active{ 
 filter: blur(20px);
 pointer-events: none;
 user-select: none;}

I also tried moving the id tag to the section, but that only blurs the heading not the rest.

user_10968134 · Answer

All you have to do is to add a "blur" class to anyone element you want to get the effect when the image is clicked.

The changes I made:

Change in CSS #blur to .blur

JS - The function takes all elements with class .blur and has add or remove class .active

HTML - added classes .blur to all elements that need to be blurred.

In one document you can have many classes with the same name, but you can have only one element with a unique ID! This is the reason I change the blur from ID to CLASS

function toggle() {
    var blur = document.getElementsByClassName('blur');
   
    for (var i = 0; i < blur.length; i++) {
        blur[i].classList.toggle('active');
    }

    var popup = document.getElementById('popup');
    popup.classList.toggle('active');
}

.blur.active {
    filter: blur(2px);
    pointer-events: none;
    user-select: none;
}

#popup {
    /*NEW*/
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    padding: 50px;
    visibility: hidden;
    opacity: 0;
    transition: 0.5s;
}

#popup.active {
    width: 650px;
    top: 53%;
    visibility: visible;
    opacity: 1;
    transition: 0.5s;
}


    
        Title
        Description.
    
    
        
            
                
                
                    Image Description
                
            
        
    
    
        
            
    





    Copyright

Blur Background When Popup Image

1 Answers