With CSS all you need to do is put a piece of code in your style sheet to automagically make image or text rollovers.
You don’t need a second image or messy scripting.
Step 1
Put the code in the head section of your page between the head tags, like in the below example:
<head>
<title>CSS Image Hover Effect</title>
<style type="text/css">
#center{ text-align:center; padding:auto auto auto auto;}
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}
a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>
</head>You only have to do this once.
Step 2
Then add a class=”linkopacity” to the link when you want to make the rollover.
It works with hyperlinked text and images.
<a class="linkopacity" href="#" title="CSS-Rollover" >
<img src="http://nowareshosting.com/examples/css-image-hover-effect/css2.jpg" border="0" style="border:1px solid black;" width="50" height="50" alt="CSS tutorials"></a>
<a class="linkopacity" href="#" title="CSS-Design" >
<img src="http://nowareshosting.com/examples/css-image-hover-effect/css1.jpg" border="0" style="border:1px solid black;" width="50" height="50" alt="WebDesign tutorials"></a>
<a class="linkopacity" href="#" title="CSS-Effect" >
<img src="http://nowareshosting.com/examples/css-image-hover-effect/CSS-Stylesheets.gif" border="0" style="border:1px solid black;" width="50" height="50" alt="Hosting tutorials"></a>
Note:
Even though this code isn’t strict standards compliant, all the style information should go in the CSS file too!
Previous 
Next 
Categories
Tag Cloud
Blog RSS
Comments RSS
Last 50 Posts
Back
Void 
Life 
Earth 
Wind 
Water 
Fire
Excellent tip! Thanks
Hey! Nice wordpress blog, I’m making my own soon and I’m just wondering if you can help me out. What themes and plugins are you using, if you don’t mind sharing? Thanks.
As the link to your profile suggests, you have had a blog for a while.
So I take it as link spam and removed it.
If you bothered to check the source code, the rel=”nofollow” is used on this blog, so your spam is pointless…. N00b -_-