Now Reading
How To Add An Opacity Blurred Hover Effect On Images And Pictures On Blogspot Blog

How To Add An Opacity Blurred Hover Effect On Images And Pictures On Blogspot Blog

by AdminAugust 26, 2016

bloggerToady, I’m posting an article for bloggers who run the blog by Blogspot or blogger, Previously I posted A Rollover Image Effect – Image Changes On Hover Good Looks For Blog, But in this tutorial I’ll show a very popular and very cool effect you can use with the images on your blog is the “Hover Opacity Effect” 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 have followed this simple steps the image or picture will appear blurred until users place their cursor over image or picture and then it will brighten up.

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)


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

.hovereffect img {
.hovereffect:hover img {

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 it’s easy.

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


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

<a class="hovereffect" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href=""><img style="cursor: pointer; width: 400px; height: 267px;" src="" 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.

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.

I hope this article helpful. If you have any question feel free to ask me anytime and must give your feedback below in comments box.

Please wait...
About The Author

Leave a Response