Back in February i published a popular Blog Tip how to use an opacity or blurred effect with images on your blog. In the post i showed you how to add some code to your template and images which resulted in images being blurred until you placed your cursor over them. So i thought maybe some of you would like to have the effect but the other way around. 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. Here’s 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 – More Info)
</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.
If you want to check out the original post with the opposite opacity effect here is the link : How To Use An Opacity Blurred Hover Effect On Images And Pictures
Drop Your Comments And Questions Below.
