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'

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

.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 :

class="hovereffect" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmsEWBl8twcsITOQjDOQ5FJNPkY8AHTHu0bpjzI_36a9M5EUFqhSFMfWxH3VpAB0nGyi8uDGYqsQEvJQ7dt3Ne9VeHyqwv45JEN2XjcSsHrDlRub6DkS326FToxM6AzdiPZfayiGf8EyuB/s1600-h/hover+image.jpg">

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.