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/AVvXsEhS8ZWV2TEmbt9CmOMecb0kafoaNoTK37w0myfANx0NNDiV479itBqLBUYPYXOmHCPS6fjB8nBARHedhPJCzpHE2ZZYsJAAIM1MQtmF7qn35LlxQK1g78bIuFv3eKwsON343mNQCKvufEA/s400/cooltext89264568.png" border="0" />
</a>

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