Free CSS Opacity Transparency Menu Watermark on an image
The working code:
Author: Free CSS Menus: www.freecssmenus.co.uk
Description: This example of css uses an opacity setting to create a hover effect. Using different levels of transparency can create nice roll-overs on your website buttons, as you can see in this css script. Whilst the effects are pleasing to see, caution needs to be applied when using it as it can change the appearance of your page. Even though new browsers understand the opacity command, the W3C CSS Validator will generate errors when testing.
Category: Image Rollover
Tested Browsers: AOL 9, Firefox 3.0.1, Opera 9.10, IE 7
Comments:
Comment from: AnnThanks for information!
Comment from: likbezGreat. I would like to see more designs using opacity.
Comment from: Martian DreamzHey, this is just what Im looking for. Ive got some great PNG designs which I am going to play around with using this opacity/css technique. Fab!
Comment from: JohnJim,
The main problem is that IE is a bit twitchy with the Opacity command.
I have made some radical changes to the css code and created a new div container for extra stability in Internet Explorer. Go back and copy the CSS and HTML and hopefully this should work.
Comment from: JimHi. I cant get the Free CSS Opacity Transparency Menu Watermark on an image working properly. From Win: In IE I have to stretch width a bit to have menu clean, but on hover image stretches.Fire Fox is perfect Its weird cuz your site looks good from IE/FF.
More CSS related to this script:
CSS World Map Rollover. I made the UK rollover map last year and thought that it was about time the internet had a descent CSS rollover world map... well here it is.
Before I start getting emails, I know that this map is geologically inaccurate but it was the best map that I could find to use for this example. It is impossible to use the sliding doors technique with this example. To avoid slow down upon rollover you could use javascript to preload the images in the HEAD section of the code.
Free CSS Opacity Transparency Menu Watermark on an image. This example of css uses an opacity setting to create a hover effect. Using different levels of transparency can create nice roll-overs on your website buttons, as you can see in this css script. Whilst the effects are pleasing to see, caution needs to be applied when using it as it can change the appearance of your page. Even though new browsers understand the opacity command, the W3C CSS Validator will generate errors when testing.
Css rollover uk map. Free rollover map of the United Kingdom. Use this smart css rollover on your own website so that visitors can quickly tell you where about in the UK they are from. This css effect is an illusion which could, potentially take any form of animation you wish. I use the word illusion because the brain immediately believes that something clever is going on.
With a little time and patience you could replicate this simple css rollover map, or you could just copy and paste these images and code.
Orange CSS Rollover Button. This orange css button has been refined to contain only one image. Other rollover buttons of this nature would normally contain two images. Here we use the: background-postion command to display the image in four different positions. Why four? Well the normal state (no hover)has both left and right edges which are needed so that the button can stretch with more text. Apon the hover state the button uses another two edges.
Transparent Opacity Rollover Menu. This css opacity menu uses different filter/opacity elements to work in most browsers. Although the W3c Css validator does not see these css commands as valid source code. It does create a nice effect for your menu / buttons. Here I have used a background colour, but the opacity filter also works when using background images. Try experimenting with opacity and send us your ideas to be featured on this website.
Latest CSS:
•
Sleak Drop-down Menu
A great example of what css can be used to create. This free download from PSDGR ...
Added: Friday 13 Aug, 2010
•
Bright Yellow Vertical Menu
If your website is bright and sunny then add this vertical menu to give it a spl ...
Added: Tuesday 15 Jun, 2010
•
Transparent Vertical Menu
This vertical golf menu uses a simple PNG image to give some transparency so tha ...
Added: Saturday 17 Apr, 2010
•
css3 Border Radius
CSS Border radius achievable with CSS3.
I do love the idea of creating corner ...
Added: Tuesday 06 Apr, 2010
•
Animated navigation menu
Great animated vertical menu. Our first submission by one of our visitors. Top M ...
Added: Monday 15 Feb, 2010
Top Rated:
Css rollover uk map
Free rollover map of the Unite ...
4.2 / 5 - 44 Ratings
Transparent Vertical M ...
This vertical golf menu uses a ...
5 / 5 - 10 Ratings
Free Tabbed Navigation ...
Tabbed navigation menus improv ...
4.4 / 5 - 9 Ratings
Image Rollover Solar S ...
This example of css uses one m ...
4.9 / 5 - 7 Ratings
Expandable Horizontal ...
Have the CSS buffs wondering h ...
4.6 / 5 - 5 Ratings
CSS Tags:
Purple Dark Block Photo Gallery Expandable Css Gold Hover Texture Width Sliding Doors Red Url Chrome Forms Button Green Icon Alignment Rating Text-decoration Light Positioning Style Corner Text Background Depth Yellow Flash Png Website Template Opacity 3d Orange Css3 Css Solar System Rounded Menu Cyan Blog Design Hypertext Z-index Menu Drop Down Image Watermark Navigation Pink List Display Border-radius Style Sheets Font Vertical Transparency Colour Horizontal Float Tutorials Tabbed Color Animation Grey Script Blue Cascading Templates Border Rollover Centering Metal
