Blur effect for images in Blogger

By nhamngahanh | posted: 20:09 | 2 comments
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 .


huy signature

Guest Blogger

This post was written by a guest contributor. Please see their details in the post above. If you'd like to guest post for SimplexDesign check out our Write for us page for details about how YOU can share your tips with our community.

Share this post

Related Posts

Advertisement

2 comments

  1. Anonymous24 October 2009 at 05:14

    Good job and really nice template.

    I'm going around the web to this different templates makers but never find one template for RADIO STATION (specially with a templates how look like some "radio station template"

    If you don't have any idee for some next templates, what not think about this ;-)

    Thanks to consider my proposition

    God bless !

    STM

    ReplyDelete
  2. nhamngahanh24 October 2009 at 07:44

    thanks for your idea .
    I will consider it in my next template . Could you give me more detail about what you really want ? Base on it ,I can make a template better .
    Hope you come back and give me more comments
    thanks again

    ReplyDelete