Spice Up Your Blog

A very popular and very cool effect you can use with the images on your blog is the "Hover Opacity Effect" and in this post i will show it's done.To achieve this image effect you need to add a small piece of code to your template and then add an extra tag to the code of images you want the effect on.Once you've followed the steps the image will appear blurred until users place their cursor over it and then it will brighten up.

Working Preview

Here is an example of the hover effect you can see its blurred until you mouse over it:


Cool I'm sure you have seen it used so here's how you can use it


Steps To Use Opacity Effect On Your Blog

Step 1. In your dashboard click 'Layout' > 'Edit Html'

Step 2. Find the following code in your blogs html
(Click CTRL and F for a search bar to help find the code)

]]></b:skin>

Step 3. Paste the following code Directly Above/Before ]]></b:skin>

.hovereffect img {
opacity:0.5;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity:0.5;
}
.hovereffect:hover img {
opacity:1.0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity:1.0;
-khtml-opacity:1;
}

You now have the code in your template to allow the effect to work.
The next step is to add code to the images you want to use the effect on and its easy.

Step 4. When you add this tag to an image it will become a hover effect image :

class="hovereffect"

Below is the code used for the image in the example above and you can see i added the hovereffect code directly after the opening anchor tag :

<a class="hovereffect" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_rKG-ziTSNUQ/S4LRZC8-v8I/AAAAAAAABIA/keigC_daGZc/s1600-h/hover+image.jpg"><img style="cursor: pointer; width: 400px; height: 267px;" src="http://3.bp.blogspot.com/_rKG-ziTSNUQ/S4LRZC8-v8I/AAAAAAAABIA/keigC_daGZc/s400/hover+image.jpg" alt="Hover Effect" id="BLOGGER_PHOTO_ID_5441141528036556738" border="0" /></a>

Place it in the same area for the images you want to have the opacity effect.
This image was uploaded to blogger but it will work with any images you use.

This is an image from Photobucket :



And here is the code used :

<a class="hovereffect" href="http://i0006.photobucket.com/albums/0006/findstuff22/Best%20Images/Photography/color1.jpg" target="_blank"><img src="http://i0006.photobucket.com/albums/0006/findstuff22/Best%20Images/Photography/color1.jpg" border="0" alt="Photobucket"></a>

Remember you can get all these tips sent directly to your email and stay a step ahead.Its a quick and easy service Provided for Free by Google.Just fill in the Email form below the post.
If you need extra help on this or any tutorial just leave a comment, I love comments and feedback so this Blog is Do-Follow - when you comment here it helps Your Blogs Google rank !

Every image you add that tag to will become an opacity hover effect image.Another great effect for images is the Rollover Image Effect and you should also check that one out.

Try it out and let me know what you think !

---

Did You Like This Post ? Click Like Below To Let Us And Your Friends Know - Thanks !

---

Important Must Read Before Posting A Comment

In order to keep our comments Do-Follow we have some guidelines you need to follow.
Do not put links in the body of your comment as it will automatically be blocked !
Asking a question ? Make sure to tick the subscribe to comments by email box to be alerted of the reply.