Blur effect on the element via Foggy jQuery Plugin

Some website owners Blur some parts of the content and ask the user to register to their website or share the article for full access to the content.

Blur effect can be used for better user-experience for example – showing container elements when mouse focus over it and Blur other containers.

For the blur effect, I am using the Foggy jQuery plugin. It is lightweight and easy to set up.

In this tutorial, I show how you can use the Foggy jQuery plugin to blur the HTML content on mouse hover.

---

Contents

1. Setup
2. How to set on the elements
3. With hover effect
4. Conclusion

---

1. Setup

Include jQuery and Foggy libraries within your project. You can download the foggy plugin from here.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="jquery.foggy.min.js" type="text/javascript"></script>

---

2. How to set on the elements

You can add effect to any element and it has a limited number of properties from there you can customize the appearance.

---

# Add Blur effect

You need to call the foggy() method on the selector or element on which you want to add or remove the Blur effect.

Syntax

$( selector ).foggy();

Example

$( "p.blur").foggy();

When the method gets called then it adds an inline CSS to the selector element for dimming it.

View Demo

---

# With properties

$('p.blur').foggy({
  blurRadius: 3, 
  opacity: 1, 
  cssFilterSupport: true 
});

blurRadius – Increase the density of Blur. Its default value is 2.

opacity – Adjust the opacity of the element. Its default value is 0.8.

View Demo

---

# Remove Effect

Syntax

$( selector ).foggy(false);

Example

$( 'p.blur' ).foggy(false);

---

3. With hover effect

Let’s put all together.

In the example, I am showing lists of the post in the container which is by default blurred. When the user mouse over one of the container then removing the Blur effect.

Example

$(document).ready(function(){
 $('div.post').foggy();
 
 // Disable Blur effect
 $('div.post').mouseenter(function(){
  $(this).foggy(false);
 });

 // Enable Blur effect
 $('div.post').mouseleave(function(){
  $(this).foggy();
 });
});

View Demo

Note – Sometimes it is not working on Firefox browser when enabling and disabling foggy() on the element.

---

4. Conclusion

Foggy by default uses the “-webkit-filter: blur” CSS attribute.

If the browser doesn’t support it, Foggy falls back to a manual blur. It makes several copies of the selected HTML element. It adds transparency to all copies and moves each of them by a small amount, thus creating the blur effect.

It supports IE (8 and up), Microsoft Edge, Firefox, Safari, and Chrome.

If you found this tutorial helpful then don't forget to share.