In this tutorial we will make an opacity rollover effect with css.
It can use for menu items and much more.
first create a folder to contain this whole project, save the three images above in the folder.
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.
Thank You!
