How to create a Blur Mask Image Website using HTML CSS and JavaScript ?

Last Updated : 18 Dec, 2023

In this article, we will see how to create a website with a blur mask image using HTML, CSS, and JavaScript. Generally, we often see this kind of effect on many websites. When clicking the button, the box immediately becomes hidden, displaying the blurred content. The website is responsive and works well on every screen size.

Preview

Output

Approach

Create a navbar using the semantic tag <nav>. Create a home, about, and contact us links in that section and style all of them in a CSS file like display, gap, height, etc.
Now create a body section and write the main content of a website.
To give a blur effect we have used a property filter with value blur(5px). We have also used media queries to make the website responsive.
Initialize a variable and by using template literals we will give some properties that we want to change dynamically when the user clicks the click here button.
Now target a particular element and apply it to the event listener for the functionality of click, and give style.

Example: The example illustrates the implementation of blur mask images using HTML, CSS, and JavaScript.

HTML

<!-- index.html -->
<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, 
                    initial-scale=1.0"> 
    <link rel="stylesheet"
          href="style.css"> 
    <title>Blur effect</title> 
</head> 
  
<body> 
    <div class="container"> 
        
        <!-- NavBar -->
        <nav class="navbar"> 
            <div class="logo"> 
                <h3 class="textgfg"> 
                      GeeksforGeeks 
                  </h3> 
            </div> 
            <div class="nav-links"> 
                <div class="home"> 
                      <a href="#">Home</a> 
                  </div> 
                <div class="about"> 
                      <a href="#">About</a> 
                  </div> 
                <div class="contactus"> 
                      <a href="#">Contact US</a> 
                  </div> 
            </div> 
        </nav> 
        
        <!-- Main content shows here 
                and blur after click  -->
        <div class="main-section" 
             id="blureffect"> 
            <div class="content-container"> 
                <h3>HTML</h3> 
                <p> 
                      Html stands for Hypertext markup language. 
                    It is used to create a basic structure 
                      of any website. 
                </p> 
                <h3>CSS</h3> 
                <p> 
                    Css stands for cascading style sheet.  
                      It is used to give styles to a html  
                      element to make website beautiful. There are many 
                    properties like colors, positioning, fonts. 
                </p> 
                <h3>JavaScript</h3> 
                <p> 
                      JavaScript is a scripting language. 
                      It is popular for it's dynamic nature  
                      and other features which makes website 
                    user-interactive. We can write JavaScript 
                    in Html file.  
                  </p> 
            </div> 
        </div> 
    </div> 
    <div class="upperdiv" id="upperdivid">Click here</div> 
    
    <!-- Footer section -->
    <div class="footertext"> 
          All rights are reserved to the respective owner 
      </div> 
  
    <script src="script.js"></script> 
</body> 
  
</html>

CSS

/* style.css*/
@import url( 
'https://fonts.googleapis.com/css2?family=Poppins&display=swap'); 
  
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    overflow: hidden; 
    font-family: 'Poppins', sans-serif; 
} 
  
/* Styles for Navbar */
.navbar { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    height: 10vh; 
    width: 100vw; 
    background-color: olivedrab; 
    justify-content: space-around; 
    overflow: hidden; 
} 
  
/* Styles for main-section */
.main-section { 
    background-color: bisque; 
    height: 80vh; 
    display: flex; 
    justify-content: center; 
    overflow: hidden; 
    filter: blur(5px); 
} 
  
.content-container { 
    max-width: 1180px; 
    text-align: center; 
    font-size: 20px; 
    gap: 40px; 
    display: flex; 
    flex-direction: column; 
    overflow: hidden; 
    cursor: pointer; 
    padding: 10px; 
} 
  
/* Properties for GeeksforGeeks */
.textgfg { 
    color: rgb(7, 68, 7); 
    font-size: 28px; 
} 
  
.nav-links { 
    display: flex; 
    gap: 50px; 
} 
  
a { 
    color: rgb(238, 225, 225); 
    font-size: larger; 
    text-decoration: none; 
} 
  
/* Style for footer */
.footertext { 
    height: 10vh; 
    background-color: olivedrab; 
    text-align: center; 
    padding: 30px; 
    font: 20px; 
} 
  
.upperdiv { 
    background-color: rgb(170, 206, 99); 
    height: 12vh; 
    width: 25vw; 
    position: absolute; 
    top: 40vh; 
    left: 40vw; 
    border: 5px solid green; 
    border-radius: 80px; 
    text-align: center; 
    padding: 12px; 
    font-weight: 700; 
    font-size: 25px; 
} 
  
/* Media queries for responsiveness */
  
@media only screen and (max-width: 608px) { 
  
    .content-container { 
        font-size: 10px; 
        padding: 15px; 
    } 
  
    .footertext { 
        text-align: center; 
        padding: 10px; 
        font: 20px; 
    } 
  
    .nav-links { 
        display: flex; 
        gap: 5vw; 
    } 
  
    a { 
        font-size: 10px; 
    } 
  
    .textgfg { 
        font-size: 18px; 
    } 
  
    .upperdiv { 
        padding: 1.5vw; 
        font-size: 15px; 
    } 
} 
  
@media (max-width: 827px) and (min-width:608px) { 
    .content-container { 
        font-size: 15px; 
        padding: 10px; 
    } 
  
    .footertext { 
        text-align: center; 
        padding: 10px; 
        font: 20px; 
    } 
}

Javascript

// script.js 
let styles = `display: none;`; 
let stylemaincontent = `filter: blur(0);` 
  
const frontbox = document.getElementById("upperdivid"); 
const mainContent = document.getElementById("blureffect"); 
  
  
frontbox.addEventListener("click", 
    () => { 
        frontbox.style = styles; 
        mainContent.style = stylemaincontent; 
    })