How to enlarge image on hover and blur rest of them?
<p>I'm trying to build jQuery module which enlarge images on hover then fadeIn description on them and at the end blur rest of not hovered images.</p>

<p>I think I've almost managed first part of module functionalities(with lots of help from your Stack) but I have problems with adding blurring script.</p>

<p>I'm using jquery.gaussian-blur.js and so far it's the best and quickest  script i've tested.</p>

<p>I've added link to my module below:</p>

<p><a href="http://jsfiddle.net/C6k9j/3/" rel="nofollow">http://jsfiddle.net/C6k9j/3/</a></p>

<p>And here's part of code.
Html:</p>

<pre><code>&lt;div id="content"&gt;

&lt;div class="wrapper"&gt;
&lt;img class="imgblur" src="http://piotrbrzezinski.pl/test.jpg" width="247" height="173"/&gt;
&lt;a href="#" class="description"&gt;
Content
&lt;/a&gt;
&lt;/div&gt;

&lt;div class="wrapper_two"&gt;
&lt;img class="imgblur" src="http://piotrbrzezinski.pl/test.jpg" width="247" height="173"/&gt;
&lt;a href="#" class="description_two"&gt;
Content
&lt;/a&gt;
&lt;/div&gt;

&lt;div class="wrapper_three"&gt;
&lt;img class="imgblur" src="http://piotrbrzezinski.pl/test.jpg" width="247" height="173"/&gt;
&lt;a href="#" class="description_three"&gt;
Content
&lt;/a&gt;
&lt;/div&gt;

&lt;/div&gt;​
</code></pre>

<p>Jquery(every div.wrapper has separate function):</p>

<pre><code>// first DIV                       
    $('.wrapper').hover(function(){

                                 $(this).stop().animate({ 

                    width: 547, height: 383, margin: -100,

                    }, {duration: 100}).css({'z-index':'10000'});
        $('.wrapper &gt; img').stop().animate({ 

                width: 547, height: 383

                    }, {duration: 100});

        $(this).children('.description').stop().fadeTo(500, 0.8);


    $('.wrapper_two &gt; img, .wrapper_three &gt; img').stop().gaussianBlur({
                deviation: 3, //level of blur
                imageClass: 'imgblur'    //class of the original image (just in case)    
            });


    },function(){

        $('.wrapper_two &gt; img, .wrapper_three &gt; img').stop().gaussianBlur({
                deviation: 0, //level of blur
                imageClass: 'imgblur'    //class of the original image (just in case)    
            });

        $(this).children('.description').stop().fadeTo(50, 0);
        $(this).stop().animate({ 

                    width: 247, height: 173, margin: 0,

                    }).css({'z-index':'100'});
        $('.wrapper &gt; img').stop().animate({ 

                    width: 247, height: 173

                    });        
    });



    // secound DIV

    $('.wrapper_two').hover(function(){

                                     $(this).stop().animate({ 

                    width: 547, height: 383, margin: -100,

                    }, {duration: 100}).css({'z-index':'10000'});
        $('.wrapper_two &gt; img').stop().animate({ 

                width: 547, height: 383

                    }, {duration: 100});
        $(this).children('.description_two').stop().fadeTo(500, 0.8);
        $('.wrapper &gt; img, .wrapper_three &gt; img').stop().gaussianBlur({
                deviation: 3, //level of blur
                imageClass: 'imgblur'    //class of the original image (just in case)    
            });


    },function(){

        $('.wrapper &gt; img, .wrapper_three &gt; img').stop().gaussianBlur({
                deviation: 0, //level of blur
                imageClass: 'imgblur'    //class of the original image (just in case)    
            });

        $(this).children('.description_two').stop().fadeTo(50, 0);
        $(this).stop().animate({ 

                    width: 247, height: 173, margin: 0,

                    }).css({'z-index':'100'});
        $('.wrapper_two &gt; img').stop().animate({ 

                    width: 247, height: 173

                    });

    });
</code></pre>

<p>Secound problem is that i don't know how to make those functionalities "children" or "parent" so I had to made separate function for every DIV.</p>
