• Articles and Tutorials
• Contact

Opacity mouseOver effect with CSS

In this tutorial we will try something different with css, we will try to make an opacity rollover effect, which could be used as menu items and much more.

This should be the final result, (note, you might not see anything if you use any special browsers or very old versions, it has to support the opacity css style).

Now for this example we need to prepare a few things, first create a folder to contain this whole project, save the three images above in the folder and dont rename them because we will be using the names.

Now open your favorite html editor, (notepad, dreamweaver etc).

First we will add the css styles at the top.

That was the styles tag, you can do it in the html file, or export it to an external .css file (then remember to delete the <style> and </style> tags).

Now we just need to place our elements with html code, and assign some classes to them to make this effect work.

As you might see its quite simple, first I make a div box just as a wrapper to hold the images.

then every image is shown in as a href link with an class calling for the style "opacityit" rollover effect.

If you have trouble making it work you can download a project here, remember if it still doesnt work, check if you use a browser that supports the opacity filter effect.

Download the css opacity project here.

Download button