How can we make background blur on hovering over a form or some other element in our document??

Answer 1

css has a blur filter, you can use it. like

<form class="blur">
<div>
<input>
</div>
...
</form>

add a class in css

.blurred{
-moz-filter: 5px,
-o-filter: 5px;
filter: 5px;
}
now the jQuery code.

var el=$('.blur>div'), blur=$('.blur');
el.hover=function(){
blur.addClass('blurred');
}
el.out=function(){
blur.removeClass('blurred');
}

Answer 2

It require some tweaks/tricks and mostly to have a particular background context to be able to apply some blur filter through Css...
I don't have time now, and I don't know when I can have... but I'll try to not forget and write you some simple example... maybe, or not ;)

( Anyway, I guess someone will help you before ^^ )

Answer 3

thanks , I should study jQuery first to understand this code ☺️☺️

Answer 4

You don't need to use jQuery to blur the background. I made an example here: https://codepen.io/ivhed/full/BRzWEQ/

But I guess this works better for simple layouts like this. Otherwise jQuery or javascript is probably the way to go. :)

<div class="container">
<button class="button">Hover me</button>
<div class="blur-background"></div>
</div>

.container {
position: relative;
}

.blur-background {
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
}

.button {
position: relative;
z-index: 2;
}

.button:hover + .blur-background {
filter: blur(3px);
}