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