![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi55bAu0nuHUwysx2SOmOt-GCGqGBx8dNzmssMCk9YRj-0HZ_AaxtvDE43V2N25Pu8ycp_8sGjuq7Vqg7gkWF12Qqhg17u8Yzbkmp8bNiiq8pRbf4dbZb4coAegS5BUv0_9NoO_-TJYSiO/s400/jquery_thumb.jpg)
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 - 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.
No comments:
Post a Comment