How To Add Image Hover Effect to Blogger

1.Log in to your dashboard--> layout- -> Edit HTML 2.Scroll down to where you see </head> Tag 3.Copy and Paste below CSS code ab...

1.Log in to your dashboard--> layout- -> Edit HTML

2.Scroll down to where you see </head> Tag

3.Copy and Paste below CSS code above </head> Tag


<style type="text/css">

a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}


a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }

</style>

4.Now Click on "Save Templates"

Now whenever you embed your image in blog or blog posts you use codes like below.


<a href="target URL of your image" target="_blank" alt="Any name you like"><img src="Link of your image"/></a>
Look at the Example below.

<a href="http://bloggertipandtrick.blogspot.com" target="_blank" alt="Blogger Tips"><img src="http://i626.photobucket.com/albums/tt346/wam8387/toyotacar-2.jpg"/></a>


5.Replace above code with below code to have hover effect..


<a class="linkopacity" href="target URL of your image" target="_blank" alt="Any name you like"><img src="Link of your image"/></a>
It will look like this.

<a class="linkopacity" href="http://bloggertipandtrick.blogspot.com" target="_blank" alt="Blogger Tips"><img src="http://i626.photobucket.com/albums/tt346/wam8387/toyotacar-2.jpg"/></a>


Bookmark and ShareSubscribe

Hot in Week

Popular

Archive

item