JavaScript Reveal Blur Image Part | Clear Area On Mouse Over

How to show or reveal a part of the blurred image? Solution: JavaScript Reveal Blur Image Part, Clear Area On Mouse Over.

I saw on a website a blurred image, but when I put the mouse cursor over the image a part of the image becomes clearly visible. Honestly, I surprised after seeing that effect. Then I start thinking about that, how this program made. Finally, I created that reveal blur images part program.

So, today I am sharing Reveal a part of a blurred image on mouse over program. I call that program JavaScript Reveal Blur Image Part. Basically, the concept is that Clear the specified area of the mouse on over blurred image. I used jQuery for creating this program, as you know jQuery is a JavaScript library so I am saying that is a javascript program.

First, I was thought that how I can create this effect, But after some times of trying finally created this. You will be surprised after knowing that how I created this, I used 2 images. You hear right, I used two images in this reveal part of the blurred image program. On first image I put an SVG blur effect, the second image I put on a circle. The circle appears on mouse hover.

If you thinking now how this revealing program actually is, then see this preview given here below.

Preview Of Clear Area On Mouse Over

See this video preview for getting an idea of how this program looks like.

https://webdevtrick.com/wp-content/uploads/jquery-reveal-image-part.mp4?_=1

Now you can clear this program visually. If you like this, the get the source code of this program.

You May Also Like:

• Text Animate On Scroll
• JavaScript Random Color Generator
• Animated Search Box HTML CSS JavaScript
• Animated Error 404 Page Design

JavaScript Reveal Blur Image Part Source Code

Before sharing source code, I want to say little bit about this program. I used HTML CSS and jQuery ( a javascript library ) for creating this program. This concept is that clear mouse over part of a blurred image. I used 2 images and a blur effect SVG for this program. The first image is blurred and second image inside a circle. The circle appears on mouse over. You can increase and decrease the size of the circle.

Also, you can adjust the position of the circle.  This is a pretty good effect, you can use this on our website after getting the code.

For creating this program you have to create 3 files. First for HTML, second for CSS, & third for JavaScript.  Follow the steps for creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given here below.

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

function.js

The final thing, Create a JS file named ‘function.js‘ and put the codes.

That’s It. Now you have successfully created JavaScript Reveal Blur Image Part program. In other words, Clear Area On Mouse Over program. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.