Title: jquery image on mouseover                                 If you need copy same format use firefox or chrome or safari but iexplorer not work


Preview of Code
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`
            });
      }
});