Free CSS Opacity Transparency Menu Watermark on an image

CSS code in acion:

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

Rate this script: Rating: 3.1 / 5
21 ratings.

Comments:

Comments
Comment from: Ann

Thanks for information!

Posted on: Friday 16 Jul, 2010
Comment from: likbez

Great. I would like to see more designs using opacity.

Posted on: Sunday 24 Jan, 2010
Comment from: Martian Dreamz

Hey, 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!

Posted on: Friday 19 Jun, 2009
Comment from: John

Jim,
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.


Posted on: Saturday 10 Jan, 2009
Comment from: Jim

Hi. 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.

Posted on: Friday 09 Jan, 2009
Comment from: ismome

you web site verry cool


Posted on: Saturday 03 Jan, 2009

Read all Comments

Post Your Comments Post your comments!






Match Random Colour
Match Random Word!
Anti-Spam Image:
anti-spam image Match Image (3 letters then 1 number)

Note: Comments are checked before they are displayed.
Please read our Terms & Conditions before submitting any comments

Top of Page go back to top of page

More CSS related to this script:

CSS World Map Rollover 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. Css rollover uk map template Css rollover uk map template. 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. Transparent Opacity Rollover Menu 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. Free CSS Opacity Transparency Menu Watermark on an image 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. Orange CSS Rollover Button 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.

Top of Page go back to top of page

Editable Templates:

CSS Website Template: Clean Dark Blue
CSS Website Template: Sea Bubbles
CSS Website Template: Pastel Purples
CSS Website Template: Machine City
CSS Website Template: Neon Light Club

Latest CSS:

Css3 Iphone Menu Pad
Creating an iphone app? how about this funky dark purple menu made in css3. Look ...
Added: Friday 24 Jun, 2011

Huge Expandable Horizontal Menu
You may be thinking that this menu was made with CSS3. Not the case! This menu w ...
Added: Monday 13 Jun, 2011

Matt Cardle Vertical Menu
2010 Xfactors Matt Cardle Menu. This vertical menu shows how a png image can be ...
Added: Saturday 16 Oct, 2010

Sleek 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

Top Rated:

Css rollover uk map te ...
Free rollover map of the Unite ...
Rating 4.3 / 5
4.3 / 5 - 55 Ratings

CSS World Map Rollover
I made the UK rollover map las ...
Rating 4.4 / 5
4.4 / 5 - 43 Ratings

Huge Expandable Horizo ...
You may be thinking that this ...
Rating 4.7 / 5
4.7 / 5 - 21 Ratings

Free Tabbed Navigation ...
Tabbed navigation menus improv ...
Rating 4.6 / 5
4.6 / 5 - 16 Ratings

Transparent Vertical M ...
This vertical golf menu uses a ...
Rating 4.4 / 5
4.4 / 5 - 14 Ratings

CSS Tags:

List Display Gold Navigation Wallpapers Layout Vertical Button Metal Hover 3d Music Css Solar System Blog Menu Drop Down Block Light Style Sheets Pink Yellow Alignment Rating Watermark Background Border-radius Transparency Tabbed Blue Hypertext Icon Dark Cascading Text Website Template Gradient Width Font Purple Iphone Horizontal Xfactor Image Menu Cyan Photo Gallery Depth Green Orange Grey Red Rounded Templates Border Design Themes Forms Color Opacity Style Url Animation Png Sliding Doors Corner Centering Float Tutorials Text-decoration Z-index Chrome Colour Css3 Script Rollover Positioning Css Expandable Flash Texture
uklowaprloans

Terms & Conditions | Site Map | Contact | asterix templateWebsite Template Builder | Free Templates | Free Wallpapers

W3c compliant (XHTML)    W3c Compliant (CSS)

Web Design    Personal Blogs - Blog Rankings

Css is one of the main ingredients for a User-friendly, Accessible website.
A good web designer should make every effort not to discriminate against those with disabilities.

Thank-you for visiting Free CSS Menus today: Monday 30th of May 2016

free css design inspiration
What is CSS?