Create "Motion Blur" effect for image in blogspot Posted by vuluganck | at Saturday, April 25, 2009

If you are a blogger , you will see many 4rums and website has 1 effect - that is called motion blur effect for image ,it means all the images will be blur and when you move the cursor on that image, it will appear clearly.It is so nice and impressive , now you will be very excited because you can do it for your images right on your blog.

Do you want to see the demo : click here to view

Yeah you like it ! Now lets go to do this !

1.Log in to Blogger.com > Layout > Edit HTML.
2.Next , find the </head> tag , then add before it this code :

<!--LINK-OPACITY-STARTS-->
<style type="text/css">

a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.linkopacity:hover img {
filter:alpha(opacity=50);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }

</style>
<!--LINK-OPACITY-STOPS-->

3.Save ! Now you have the effect. But not finish at all , you have to do this if you want the images have the effect, I mean you have to put the image URL in this right form:

<a class="linkopacity" href="Option URL"><img src="Image URl" /></a>

Note:
-Do not change the bold word (linkopacity).
-The red code : you can do it your own.

For example :

<a class="linkopacity" href="http://zenplate.blogspot.com"><img src="http://www.ssaidoor.com/images/rss-feed-button.jpg" /></a>

If you have any problem please leave me a comment , thank you and don't forget to introduce this to your friends ( of course link back to me-Zenplate).
Thank you guys and I hope you like this.