jQuery - Change blurred image on mouseover

In this article we will see how we can change blurred image on mouse over using jQuery.

 

 

 

Let's see how we can do this.

 

Step 1: Add jQuery jquery-1.4.2.min.js in the header section of the page.

 

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>

Step 2: Place below HTML in the aspx page.

<div style="margin-top: 100px; margin-left: 300px; margin-bottom: 200px;">
      <div>
            <span>
                  <asp:Image ID="imgA" class="imgThNail" runat="server" Width="200px" Height="200px" ImageUrl="images/Aston_Martin-V12_Vantage_2010.jpg" />
            </span>
            <span>
                  <asp:Image ID="imgB" class="imgThNail" runat="server" Width="200px" Height="200px" ImageUrl="images/Seat-Altea_TDI_2005.jpg" />
            </span>
            <span>
                  <asp:Image ID="imgC" class="imgThNail" runat="server" Width="200px" Height="200px" ImageUrl="images/Honda-CR-Z_2011.jpg" />
            </span>
      </div>      <div>
            <span>
                  <asp:Image ID="imgD" class="imgThNail" runat="server" Width="200px" Height="200px" ImageUrl="images/Hummer-H3_Alpha_2008.jpg" />
            </span>
            <span>
                  <asp:Image ID="imgE" class="imgThNail" runat="server" Width="200px" Height="200px" ImageUrl="images/Mercedes-Benz-SL63_AMG_2009.jpg" />
            </span>
            <span>
                  <asp:Image ID="imgF" class="imgThNail" runat="server" Width="200px" Height="200px" ImageUrl="images/Suzuki-Swift.jpg" />
            </span>
      </div>
      <div id="sourceDiv" style="display: none; border: Solid 1px White;">
      </div></div>

Step 3: Place below script in the aspx page which will make all the images blurred on the page load. On mouseover the blurred imaged

$(document).ready(function() {
      //To make all the images blurred on page load
      $('img.imgThNail').css('opacity', 0.4);

      //Turn off the blur on mouseover
      $("img.imgThNail").mouseover(function(e) {
            $(this).css('opacity', 1);
      });
      //Turn on back the blur on mouseout
      $("img.imgThNail").mouseout(function(e) {
            $(this).css('opacity', 0.4);
      });
      document.onclick = check;
      function check(e) {
            $("#sourceDiv").css({
                  display: 'none'
            });
      }
});

Live Demo
Like us if you find this post useful. Thanks! 
Shibashish mohanty