How To Use An Opacity Blurred Hover Effect On Images And Pictures


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.

Steps To Use Opacity Effect On Your Blog

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

Blogger layout

edit html blogger

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 its 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 hovereffect 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.

Drop Your Comments And Questions Below.

Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative

If You Enjoyed This Post Please Take 5 Seconds To Share It.


  1. what if the image code is like
    img alt="67 in Beautiful Black and White Photography" src="" /
    where should i put the 'class= "hovereffect"
    thanks :)

  2. @ ayrn - The alternative text tag (alt) or any other tag wont effect the code.Just add class='hovereffect' where shown (after src= and in your case before alt=) and it will work pefrfect.


  3. Hi Paul! This is a lovely effect! Is there a way to use it for a group of images that are linked? I have a photo menu I'm using and this would look brilliant for that.

    Thanks so much for all your help with the posts! You are absolutely lovely!


Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.

Hire Us