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:
Any fix for PNG files with transparency looking like s#it in IE and Chrome? i.e halos will appear around the img...
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
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.
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?
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
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; }
@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