Highlight image hover effect (opacity or borderize)

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmcw6l4HO3lhldxDgpUAGduhO4U2_htNQIKs6jtsS7iYNziLBmL3gE31LA5eN0mc3wtmSlwxNB1PEf225CtX02c-PXpUsHVMtwvmKbeA9cTcYsGRl0ldat7y4NtZnKtFLA-SD1-JETno8/s400/cooltext89264568.png" border="0" />
</a>

<a class="toggleborder" href="http://bloganol.blogspot.com/">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzzkGxe8l8kBtOZKTLt43mrGoHPh1qeNBn0iP2tc6ToYnVu48kr5Shv8PKugSkgcbDlorTcD530HMW6gcHNc_DIlRAwLpiehHqLOULrOwmKxRmQKnFWTSv6_CPb7LMYdE7C4Ij6YxbJ9g/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.