Blogger - Add hovering effect on images using opacity

Blogger -Add hovering effect on images using opacity

Have you wondered some of your favorite blogs show some hovering effects? One of the great ways to add spice to your blog is adding opacity to post images. In this post we will see how do we add opacity to your blog’s images so that they will change when you hover your mouse over the images.

sample image- Steve jobs

There primarily 3 ways to do add opacity to images on your blog

1. Javascript
2. Jquery
3. Css

Out of all the three, I found adding css is a simplest way to do which doesn’t require lots of coding language and works with every platform like blogger, wordpress

Change image opacity on mouse hover

1.Go to blogger >> edit html
2. Ctrl + f & search ‘img’ in the code which should look somethink like

img{
}

3.There is possibility you have some attributes inside the img tags.
Now just add following code inside the img{ }
opacity: 1;
filter: alpha(opacity=100);

4. Now ctrl+f & search ‘img:hover ‘ and if it’s not present just add following line of code just under

img{
}

5. So, now over all code should something like this

img{
opacity: 1;
filter: alpha(opacity=100);
}

img:hover {
opacity: 0.5;
filter: alpha(opacity=50);
/* background color transition */
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
transition: 0.5s;
}

Now , every image on your blog will be shown with dynamic opacity which will change on hovering the mouse.