Abeon Tech
Abeon Tech
2 Sep
Posted by admin

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:

   <title>CSS Image Hover Effect</title>
   <style type="text/css">
     #center{ text-align:center; padding:auto auto auto auto;}
     a.linkopacity img {
     -moz-opacity: 0.5;
     opacity: 0.5;
     -khtml-opacity: 0.5;}

     a.linkopacity:hover img {
     -moz-opacity: 1.0;
     opacity: 1.0;
     -khtml-opacity: 1.0; }

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://abeon-hosting.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://abeon-hosting.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://abeon-hosting.com/examples/css-image-hover-effect/CSS-Stylesheets.gif" border="0" style="border:1px solid black;"  width="50" height="50" alt="Hosting tutorials"></a>

Even though this code isn’t strict standards compliant, all the style information should go in the CSS file too!

Category: Web Design Tag: ,
Abeon Tech

3 Responses to “Css Image Hover Effect”

  1. Cheap Guy says:

    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.

  2. Abe says:

    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 -_-

Leave a Reply

You must be logged in to post a comment.

Abeon Tech
Abeon Tech

Designed by