How Create Image Hover Effect In Blogger



Image hover effect in blogger,as this is very easy trick to be performed and used by many of pro blogers too.When you move your cursor to any of the image the hover effect over it takes place and its view is more clear then before.I love using this hack.Its just small css trick that is done by adding styling to your blog css and define its class while using your image url in blog posts.

How to make image hover over effect.

Log in to Blogger Then Got To

Blogger LAYOUT > Edit Html > Press Ctrl+F

Search For </head>

And place the below css above it


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


Now save the Template.

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



You use green codes like below in your blogs for images.

<a href="http://anshuldudeja.blogspot.com" target="_blank" alt="Blogger Widgets"><img src="http://img2.pict.com/aa/ae/97/16680dfb7c10435cbefea4aa04/4OXiK/geneliadsouzawallpaperspicturesd.jpg"/></a>

Use below blue code in place of above green code to have hover effect.

<a class="linkopacity" href="http://anshuldudeja.blogspot.com" target="_blank" alt="Blogger Widget"><img src="http://img2.pict.com/aa/ae/97/16680dfb7c10435cbefea4aa04/4OXiK/geneliadsouzawallpaperspicturesd.jpg" /></a>


Difference in both codes is just have i ahave added class=linkopacity in red in second code.

For Demo Of Image Hover Effect of two images visit Demo Blogger Widget Blog.

7 comments:

Anonymous said...

Any fix for PNG files with transparency looking like s#it in IE and Chrome? i.e halos will appear around the img...

oliva said...

hello
it did not work for me. nothing happends? why? my end code does not look like your example but the beg code looks the same, could it have something to do with it?

thanks

Anshul said...

it will work for sure as its just simple css,there is no point in saying it will not work.Just install it carefully you might have made some mistake.

ดูหนัง said...

You know Your blog keep my eye glued and I watched this blog from lastly template to new template and I just want to tell you that I like this template much where to get this? could u?

Keez said...

hi, when i put in this code, the image was dim on my blog and got lighter when i hovered over it but there was no pop up. Any idea how to fix this? thanks

ashwin shahapurkar said...

dear anshul i found it is notworking when u place it just after head or just before closing head. correction:-

find ]]>

and past this code above it

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; }

Anshul said...

@ashwin either place before skin tag without using stlye tags and if use style tags place before head tag.Way is same just to place css.

Post a Comment