These codes will produce simple, non-animated "mouseover" effects. This means that if someone hovers their mouse over a text link or linking image on your page, something interesting happens to it.

Don't forget to change the text color (and any other applicable colors, like border colors) of the mouseover by replaing the question marks with a hex color code!

These mouseovers do not come with a credit image because we don't feel they need one -- we don't actually host anything for these. However, if you'd like to credit us anyway for the work we've put into them, it would be appreciated!

All mouseover effects are CSS only and may not work outside of Internet Explorer.

BLUR IMAGE
<style type="text/css"> a:hover, a:hover img {color: #??????; filter: blur(strength="50");} </style>

DASHED BORDER
<style type="text/css"> a:hover, a:hover img {color: #??????; border:2px dashed; border-color: #??????;} </style>

DOTTED BORDER
<style type="text/css"> a:hover, a:hover img {color: #??????; border:2px dotted; border-color: #??????;} </style>

FADE IMAGE
<style type="text/css"> a:hover, a:hover img {color: #??????; filter:alpha(finishopacity="0", style="2");} </style>

GRAYSCALE IMAGE
<style type="text/css"> a:hover, a:hover img {color: #??????; filter:gray;} </style>

GROOVED BORDER
<style type="text/css"> a:hover, a:hover img {color: #??????; border:2px groove; border-color: #??????;} </style>

HORIZONTALLY FLIP IMAGE
<style type="text/css"> a:hover, a:hover img {color: #??????; filter:fliph;} </style>

INSET BORDER
<style type="text/css"> a:hover, a:hover img {color: #??????; border:2px inset; border-color: #??????;} </style>

INVERT IMAGE COLORS
<style type="text/css"> a:hover, a:hover img {color: #??????; filter:invert;} </style>

OUTSET BORDER
<style type="text/css"> a:hover, a:hover img {color: #??????; border:2px outset; border-color: #??????;} </style>

RIDGED BORDER
<style type="text/css"> a:hover, a:hover img {color: #??????; border:2px ridge; border-color: #??????;} </style>

SOLID BORDER
<style type="text/css"> a:hover, a:hover img {color: #??????; border:2px solid; border-color: #??????;} </style>

VERTICALLY FLIP IMAGE
<style type="text/css"> a:hover, a:hover img {color: #??????; filter:flipv;} </style>

WARP/WAVE
<style type="text/css"> a:hover, a:hover img {color: #??????; filter:wave (strength="3", lightstrength="30");} </style>