Search code examples
jqueryhtmljquery-effects

How to add more blur hoverizr

Hi can someone help me with adding more blur using Hoverizr.min.js

I have used the following code to blur an image, but I need to blur it more. The image size is around 1200px in height and 700px width.

The code I am using is:

$(window).load(function() {
$('.box1').hoverizr({effect:'blur',speedOut:'slow'});

and the html is:

<img class="blur box1" src="img/img1.jpg" />

Any help how to add more blur would be great.

Solution

  • So after researching so many option with the blur, I decided to go old school.

    How I did this was made the image blur in photoshop and place both images over each other with position absolute.

    Once there was two images, one blur and the other under was focused. I just used the option fadein and fadeout with jquery. And it runs smoothly across all browsers.

    Wish I was about to get this to work with hoverizr but sadly lack of content.