How can we make background blur on hovering over a form or some other element in our document?? | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 2

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

10th Apr 2017, 2:21 AM
Anurag
Anurag - avatar
4 Answers
+ 6
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'); }
10th Apr 2017, 4:57 AM
Sandeep Chatterjee
+ 5
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 ^^ )
10th Apr 2017, 4:41 AM
visph
visph - avatar
+ 2
thanks , I should study jQuery first to understand this code ☺️☺️
10th Apr 2017, 1:17 PM
Anurag
Anurag - avatar
0
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); }
22nd Apr 2017, 10:47 AM
lindviveronika
lindviveronika - avatar