JavaScript Blur Effect On Hover

JavaScript Blur Effect On Hover
Project: Blur background
Author: Deep Patel
Edit Online: View on CodePen
License: MIT

This JavaScript code snippet helps you to create a blur effect on hover. It gets references to the HTML elements with IDs “wrapper” and “blurImg”. This also retrieves the background image path of the “wrapper” element and stores it in the “img” variable which sets the background image of the “blurring” element to the image path stored in the “img” variable.

This code defines a function named “wrapperSize” to set the height and width of the “wrapper” and “blurImg” elements based on the size of the window and initializes the height and width of the elements by calling the “wrapperSize” function and registers the function to be called whenever the window is resized using the “resize” event listener.

How to Create JavaScript Blur Effect On Hover

First of all, load the following assets into the head tag of your HTML document.

<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

Create the HTML structure of blur effect on hover is as follows:

<svg version="1.1" id="blur" xmlns="http://www.w3.org/2000/svg">
   <filter id="blurfilter">
       <feGaussianBlur stdDeviation="3" />
   </filter>
</svg> 
<div id="wrapper">
  <div class="form">
    <div class="formdetails">
      <input type="text" placeholder="Username"></imput>
      <br>
      <input type="text" placeholder="Password"></imput>
  <div class="text-right">
  <button type="submit">Log in</button>
    </div>
    </div>

<div id="blurImg"></div>
    </div>
</div>

Now, style using the following blur on hover with CSS:

*{
  box-sizing: border-box;
}
.cd__{
display: block !important;
}
#wrapper{
  height:100%;
  width:100%;
  position:relative;
  background:url("https://unsplash.it/1366/786/?random") no-repeat center;
  background-size:cover;
}
.form{
  overflow:hidden;
  
width: 360px;
 position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  -webkit-transform:translate(-50%,-50%);
  -moz-transform:translate(-50%,-50%);
      border: 6px solid rgba(128, 128, 128, 0.59);
    box-shadow: 0 0 25px rgba(0,0,0,.8);
  border-radius:10px;
}
#blurImg{
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
  position:absolute;
  top: 50%;
left: 50%;
  z-index:5;
  filter: blur(3px); 
  -webkit-filter: blur(3px); 
  -moz-filter: blur(3px);
  -o-filter: blur(3px); 
  -ms-filter: blur(3px);
  transform:translate(-50%,-50%);
  -webkit-transform:translate(-50%,-50%);
  -moz-transform:translate(-50%,-50%);
  filter: url(#blurfilter);
  
   filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
}
svg{
  position:absolute;
  top:0;
  left:0;
  height:0;
  width:0;
}
.formdetails{
position: relative;
height: 100%;
width: 100%;
z-index: 10;
  padding:15px;
}
input[type=text]{
  padding: 15px;
background: rgba(255,255,255,.4);
border: none;
font-family: monospace;
width: 100%;
margin-bottom: 12px;
}
button[type=submit]{
  background:rgba(255,255,255,.3);
  border:2px solid #333;
  font-family:helvetica;
  font-weight:bold;
  font-size:12px;
  text-transform:uppercase;
  padding:10px 30px;
  color:#333;
  box-shadow:0px 3px 4px rgba(0,0,0,.5);
  
}
.text-right{
  text-align:right
}

Finally add the following JavaScript for its functionality:

var wrapper = document.getElementById("wrapper"); 
var blurImg = document.getElementById("blurImg");
// get wrapper background image path
style = wrapper.currentStyle || window.getComputedStyle(wrapper, false),
img = style.backgroundImage.slice(5, -2);
// set path to our blur div as background
blurImg.style.backgroundImage = "url('"+img+"')";

function wrapperSize(){
// function for height and with of main wrapper and blur div
var winHeight = window.innerHeight, 
    winWidth = window.innerWidth;
wrapper.style.height = winHeight+"px";
wrapper.style.width = winWidth+"px";
blurImg.style.height = winHeight+"px";
blurImg.style.width = winWidth+"px";
}
//initialise height and width
wrapperSize();
 
window.addEventListener("resize", wrapperSize);

That’s all! hopefully, you have successfully created JavaScript Blur Effect On Hover. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply