Blur effect for images in Blogger

Blur is one of popular effects for WEB 2.0 . When applying blur effect to image in website , inactive images will be blur and only show if mouse over .

you can check demo here

to do this effect ,follow these steps :
login to Blogger ,go to Layout and continue to Edit HTML
insert this code before </head>

<!--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-->

Save template ! Blur effect is added to your blogger .
To added Blur effect for each image ,use this structure :

<a class="linkopacity" href="your_URL"><img src="Your_image_url" /></a>

Ok,you are done .