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




| 4 comments

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.Heres how it's done..

jQuery Blurred Image Effect

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


Blogger layout

edit html blogger


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.


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

4 comments:

  1. Worked a treat on the images in my blog.

    ReplyDelete
  2. Thank you! It works well for my blog. Thank you so much for this tut.

    ReplyDelete
  3. Is there any way to add this image effect with HTML sidebar because I don't want to play with my template codes.

    ReplyDelete
  4. How can I get this to work on only my sidebar photos?

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us