2009/04/25

Create "Motion Blur" effect for image in blogspot


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.

6 comments:

Anonymous said...

Je suis nouveau dans cet espace, je ne parle pas bien l'anglais mais j'ai compris l'essentiel de ton post grace au traducteur.Je trouve interessante ton explication de cette technique "effet de motion blur", je l'essaierai par la suite dés que j'aurais terminé la construction de mon blog.

vuluganck said...

Vous êtes les bienvenus, garder de rejoindre mon blog, vous pouvez commenter moi alors je vais vous aider.

Unknown said...

hi,
je vais tester également
merci

vuluganck said...

Pas de problème, n'oubliez pas de présenter à vos amis de mon blog, je vous remercie

LouLou said...

hix bác là người Việt mà sao toàn chơi tiếng anh thế em khó hiểu quá lơ mơ

vuluganck said...
This comment has been removed by the author.

Post a Comment

Thanks for reading , if you have any problem please leave me a comment here I will help you by my best.Please note that you put the friendly words tohelp each other to improving and developing these tips to be better,or the best way for you to track my blog is subscribing my Feed.You are always welcome on Zenplate.
Best regard
Zen

 
.