Add Opacity Blur Effect To All Images On Your Blog With JQuery

In this post i will show you how to have all the images on your blog clear but they will blur when your place your cursor over them.This time the blurred image effect is achieved using jQuery so there is only a small piece of code needed.

Remember while the original Opacity effect could be used on selected images this effect will be on all images within your blog.Heres how it's done..

jQuery Blurred Image Effect

Step 1. In you dashboard click 'Layout' > 'Edit Html'

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code):

</head>

Step 3. Copy and paste the following code Directly Before / Above </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(".post img").fadeTo("slow", 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(".post img").hover(function(){
$(this).fadeTo("slow", 0.5); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity back to 30% on mouseout
});
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(".latest_img").fadeTo("slow", 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(".latest_img").hover(function(){
$(this).fadeTo("slow", 0.5); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity back to 30% on mouseout
});
});
</script>

With the code in place you can now save your template and check out the cool new image effect on your blog.