Add Opacity Effect to Images in Blogger

Share

Now you can add Image hover effect to images in blogger very easily. Adding Opacity effects to your blog images surely makes it outstanding. First lets learn how to add the Opacity effect to our images.



Step 1:

Login to Blogger
Go to Design And select Edit HTML tab
Then Find

</head>

Step 2:

Add bellow CSS code just before it

<style type='text/css'>
a.opacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}
a.opacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>

Step 3:

Save The Template

Now when you want to add the opacity effect to your images in any part of your blog, you have to modify the linking code like this.

Normal Code :

<a href="http://www.bloggertheme.net/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBhmDQIvxa6Bzw2jWcygCgW8SDviFaQU5vgyq0ZyDYc2DBq41v_KVIntxjNuM_2NI6DMoKru7Li3FezpRihNaPFJFJ-AlvCHWEF-wJNKFTOjlkFsPxKbcuQ_TvR4mmOcosAEB32B9OOU8/s1600/twitter.jpg" /></a>

if you want to add the opacity effect to your images, all you have to add a class="opacity" in your image code just after starting <a> tag like this.

<a class="opacity" href="http://www.bloggertheme.net/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBhmDQIvxa6Bzw2jWcygCgW8SDviFaQU5vgyq0ZyDYc2DBq41v_KVIntxjNuM_2NI6DMoKru7Li3FezpRihNaPFJFJ-AlvCHWEF-wJNKFTOjlkFsPxKbcuQ_TvR4mmOcosAEB32B9OOU8/s1600/twitter.jpg" /></a>

Image Credits : Vector4Free