How To Add Image Hover Effect to Blogger

How To Add Image Hover Effect in 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 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>