In this tutorial we will make an opacity rollover effect with css.
It can use for menu items and much more.
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
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.
Image may be NSFW.
Clik here to view.
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!
Incoming search terms:
Follow us on Twitter WordPress API
