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