In the previous hack we have learned to create popup Image viewer in blogger . Now we are learning to change opacity of the image on mouse hover and applying a border to any image link when we hover the image . the credit of this hack directly goes to dynamicdrive.Now see the following demos that gives you clear view of this hack.
Demo:Hover the image with your mouse pointer.
Opacity Highlight
Border Highlight
How was demo?Good.Now lets start the installation of this hack . First thing is to Copy the following CSS code to the head section of your blog.
<style type="text/css"> .toggleopacity img{filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);-moz-opacity: 0.5;} .toggleopacity:hover img{filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);-moz-opacity: 1;} .toggleopacity img{border: 1px solid #ccc;} .toggleborder:hover img{border: 1px solid navy;} .toggleborder:hover{color: red; /* Dummy definition to overcome IE bug */} </style>
Now second and Last step Copy the following code and Paste it to your Blog post or Sidebar adding a new Html Page.
<a class="toggleopacity" href="http://www.bloganol.blogspot.com/"><img src="http://2.bp.blogspot.com/_Sy2Ab2UICp0/SDN-U8KNV6I/AAAAAAAAAIw/hwKEAy8iEYY/s400/cooltext89264568.png" border="0" /></a>
<a class="toggleborder" href="http://bloganol.blogspot.com/"><img src="http://1.bp.blogspot.com/_Sy2Ab2UICp0/SAqbHx5dnuI/AAAAAAAAAG8/xjPSKF0oCEw/S1600-R/bloganol.jpg" border="0" /></a>
In the above code the firt part defines the Opacity Effect and The second Part Defines the Border effect . You can change the link and Image url of own own.
If you got any problem ,not satisfied or Liked this posts then please leave a comment on this page. you single comments gives 1 million Calorie of Energy to do good works.
Consider to Subscribe to our RSS feed or Follow us at Twitter or Join our Facebook Fan Page.Enter your Email below to subscribe to our updates via Email.
Similar Posts
- Social bookmarking widget with opacity effect for blogger
- 5 tabbed Content Widget for Blogger
- Create CSS popup Image Viewer in Blogger
- Blogger hacks directory Page
- Table of Contents Page
Article by Dinesh Dhakal
Dinesh has written 310 awesome articles for us. Dinesh Dhakal(Deineshd) is the Admin of this blog.He is from Kathmandu, Nepal who is blogging since complete 4 years.You can catch him on twitter at Twitter.com/deineshd and in Facebook at Facebook.com/deineshd.
{ 2 comments… read them below or add one }
nice article. i admire your writing abilities. you write and do your research well. this is actually my first time to visit your site and i will be following your from now on. thanks!
Great post! I am just starting out in community management/marketing media and trying to discover how to do it well – resources like this post are incredibly useful. As our organization is dependent in the US, it?s all a little bit new to us. The example above is something that I worry about as well, how to show your own genuine enthusiasm and write about the truth that your product is useful in that case.