Real Name	:	SharingCode.NET User
Subject	:	Highlight image hover effect (opacity or borderize)
Description	:	The first example changes the opacity of any image link when the mouse moves over it using the "hover:" pseudo class of CSS. Note the two different properties used to specify opacity in CSS below. In IE 5.5+, the "filter" property is used (range: 0-100), and in Firefox, "-moz-opacity" (range: 0-1). Both properties are proprietary, and not formally endorsed by the W3C.
<style type="text/css"> /*Credits: Dynamic Drive CSS Library */ /*URL: http://www.dynamicdrive.com/style/ */ .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> <a class="toggleopacity" href="http://www.dynamicdrive.com"> <img border="0" src="media/button.gif" width="137" height="26" /> </a> <a class="toggleborder" href="http://www.dynamicdrive.com/style/"> <img border="0" src="media/button2.gif" width="163" height="57" /> </a>
Rating	:	0.00 (out of 5)

Visitor Voting Booth

:

ExcellentVery GoodGoodFairPoor