We have been moved to http://www.bloganol.com/

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{
-moz-opacity: 0.5;

.toggleopacity:hover img{
-moz-opacity: 1;

.toggleopacity img{
border: 1px solid #ccc;

.toggleborder:hover img{
border: 1px solid navy;

color: red; /* Dummy definition to overcome IE bug */

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 class="toggleborder" href="http://bloganol.blogspot.com/">
<img src="http://1.bp.blogspot.com/_Sy2Ab2UICp0/SAqbHx5dnuI/AAAAAAAAAG8/xjPSKF0oCEw/S1600-R/bloganol.jpg" border="0" />
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.


0 Responses to "Highlight image hover effect (opacity or borderize)"

Speak Your Mind

Tell us what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!