This short article illustrates a very easy way to add simple :hover effect to any object with JavaScript libraries. Start by adding this simple CSS declaration to your main CSS file:

/* SPECIAL OPACITY EFFECTS */
.trans {opacity:.50; filter:alpha(opacity=50); -moz-opacity: 0.5;}

On the html elements you want to effect with transparency use the following:

class="trans" onmouseover="this.className=''" onmouseout="this.className='trans'"

This sets the original html element to a slightly transparent state and when the mouse hovers JavaScript changes the class name to create the effect.

Very simple and effective with minimal code.

Note to self: Add an example that does not need the JavaScript by using a:hover instead...