11 December, 2009

Create Image hover effect to images -By changing opacity


This is a pretty simple hack which uses simple CSS by changing opacity to differentiate between active and inactive images.
IF you love this example then you can add this to your blogspot/blogger.
Follow the easy steps and this hack could be yours ::

  • Login to your dashboard. 
  • Under layout -choose Edit HTML
  • Expand widget template
  • Use your browser search to find <head> and paste the below code above <head> 
<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>

And click Save Template

How to Use?

You can use this effect in post area or in  HTML/javascripts gadgets
When ever you want to add opacity to your image with hover effect use below code :
<a alt="Blogger Widget" class="linkopacity" href="http://myfundoo-blog.blogspot.com/" target="_blank"><img src="http://i35.tinypic.com/jadyt5.jpg" /></a>

Else if you want to add image normally like you always done before use like this:
<a href="http://i35.tinypic.com/jadyt5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i35.tinypic.com/jadyt5.jpg" /></a>

 Note The differerence between the two is that the above one uses class 'linkopacity' for which we have added css in our template while the second one does not uses class 'linkopacity' and hence works as simple image.

No comments:

Post a Comment


Spam/advertising comments will NEVER BE TOLERATED and will be deleted immediately!

I advise you to also "subscribe to the comment feed" and get email updates when I respond to your question.
Thanks for reading,
Admin