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{
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.

comments

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!