jQuery - Change blurred image on mouseover

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


jQuery Blurred Image


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.



Step 2: Place below HTML in the aspx page.

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