Mobile Friendly Website


Doing it with style

Opacity-menu COMMENTS

Welcome to my Comments Pages

Please note. I get a few hundred emails a week from visitors asking for help, or posing questions on how to modify my demos to suit their application and I read them all. Unfortunately I only have a limited amount of time to spend answering these questions.

So if I do not reply, please do not be offended, and if I do reply then you are one of the lucky ones.

If you are asking for permission to use any of my demonstration then please email me with your request stu{at}

Post a comment

Current posts

hmmm ... so youre not going to show us how you did it? I guess I could look at the source but you didnt really invite me to ... how about just posting the code along with the menu?
(01.03.2004, 19:44)

I have stated in several places on this web site that visitors can examine the source code and help themselves to whatever they like. Be my guest :)

A link back to this site would be nice (but not compulsory)
(01.03.2004, 21:05)

I was always under the impression Firefox would emulate exactly the same across all platforms. Maybe I misread something, but if that is the case (as I was lead to believe), then it came as a surprise to me that this example doesn't fucntion as it should on the Mac version of Firefox. Just an FYI.
(27.05.2004, 15:11)

I'm using this method to set up a gallery. When I validate the CSS, it lists the following errors:

* Line: 64 Context : #gallery img a , #gallery img a:visited
Parse Error - opacity=70)

* Line: 64 Context : #gallery img a , #gallery img a:visited
attempt to find a semi-colon before the property name. add it

* Line: 64 Context : #gallery img a , #gallery img a:visited
Property progid doesn't exist : DXImageTransform

* Line: 64 Context : #gallery img a , #gallery img a:visited
Parse Error - DXImageTransform.Microsoft.Alpha(opacity=70);

* Line: 64
Parse Error - : 0.7; opacity:0.7; } #gallery a:hover

* Line: 64 Context : #gallery img a:hover
Parse Error - opacity=100)

* Line: 64 Context : #gallery img a:hover
attempt to find a semi-colon before the property name. add it

* Line: 64 Context : #gallery img a:hover
Property progid doesn't exist : DXImageTransform

* Line: 64 Context : #gallery img a:hover
Parse Error - DXImageTransform.Microsoft.Alpha(opacity=100);

* Line: 64
Parse Error - : 1.00; opacity:1; }

How do I correct this so it validates?
(16.10.2004, 23:41)

I used this for a list menu without images! in firefox it works fine, but in the explorer it says that the security level is "blabla" and when i allow it, it doesn't show the effect anyway. but when i surf your site with the explorer it works too! where is the difference?! may you used it with images and me not? thx for help!
(03.11.2004, 13:57)

Your site is fantastic! Thank you very much, not only for the actual coding required, but the originality and thoughtful ideas!
(11.11.2004, 20:33)

Marianne van der Klugt:-
I think your site is great. I have been studying the various source codes which helped me a lot in getting acquainted with CSS. However, I have a problem which I cannot solve.
In the picture menu (Opacity section) I came across the following piece of code:

<a href="../menu/freddie2.png"><img src="../menu/freddie2.png" width="50" height="50" alt="" title="" /><span class="one">Freddie Mercury and Queen</span></a>

Where does <span class="one"> came from? I couldn't find it back in the style tags.
(24.01.2005, 18:18)

Hi, I have now removed this class as it is not now required. I probably added it intending to be able to set up different colour text for each picture.
Thanks for pointing it out.
(24.01.2005, 20:07)

Marianne van der Klugt:-
Thanks for your prompt answer. I have one more question, if you don't mind. I am not a CSS-expert, so maybe my question sounds silly, but how can I change the colour of the caption? Now it is red, but can I change it in the following way:

<span style="color:deeppink"> (between the body tags)?

I have tried to trace the red colour in the style tags, but I couldn't find it.
(25.01.2005, 10:02)

The color is set by the style #menu a:hover span.
At the moment it is #c00. You can change this to deeppink (which is #ff1493}.
(25.01.2005, 23:03)

superb stu. ace site.
(10.02.2005, 11:40)

Quentin Ellis:-
hi, fantastic site. I tried to use your opacity code in a page that also contains a flash banner. In firefox, when the image is rolled over the flash banner flickers. Is this a problem with my coding or something wrong with firefox? Thanx again for your site. Great to see what can be possible
(23.03.2005, 18:06)

Strange if i use opacity for my menu Buttons CSS dont validate the opacity but strange here CSS validet opacity.
Is there a trick ?
(27.03.2005, 22:21)

No trick. If you are using the link at the bottom of the page then this is for validating the s7u.css styl sheet. The inline style is not checked. The opacity style does not validate according to for this reason I have stopped adding to this section until all browsers support opacity correctly.
(27.03.2005, 22:51)

Jim Kay:-
works in IE5.5
(16.04.2005, 14:04)

Jess Have:-
Opacity is supported in Safari 1.3 (v312).
(16.04.2005, 20:47)
I like this opacity thing too!

Also excellent
(09.05.2005, 20:24)

I love this and everything else on the site stu, all very inspirational!
Something you may be able to help me with though; I am trying to use this as a background of block of text, the problem is though that the text also loses opacity, i have tried setting the text back to full opacity but with no luck.. any ideas?
thanks a lot :)
(08.11.2005, 23:51)

There is a BUG in Firefox when you use opacity at 100, so you need use 0.99, and no flicker
(28.12.2005, 21:11)

Tim Mesikepp:-
Hi Stu, and thanks for the great site! When I try to incorporate the opacity css in my site, IE comes up with security warnings. However, on this site and others using the same code, that doesn't occur. Do you know what I need to add so there isn't a security warning?
(03.01.2006, 16:06)

there's a way to do opacity in safari as well.
(20.01.2006, 23:20)

black sunshine:-
opacity works in Opera 9.0 TP2 =)
(29.03.2006, 23:33)

Yep, Opera 9 does support opacity.
(31.03.2006, 08:37)

dr. radiaki:-
thank you so much for the script, it's very well done!
my question has already been asked 2 times: the script runs very good when using firefox, but when using the internet explorer, there is a security advise.
the thing is, that this is not the case when using the ie on your page. so is there a special trick to eliminate the secruity advise? thanks
(24.05.2006, 16:38)

Nice layout. But i didnt find information for me that i try to find on your website. But thanks you in any way!
(17.06.2006, 09:05)

Hi! Your site appeared very useful to me. Excellent work, thanks.
(20.06.2006, 20:46)

the picture menu (/opacity/picturemenu.html) is not CSS valid (any more).

further I would like to compliment you with your site, good work!
(08.07.2006, 10:14)

Many of the questions asked in the comments are interesting. Is there a place to see your answers?

Here's my question(s) - I'm trying to use the opaque ment, but never do anything exactly as told. I want a vertical menu instead of horizontal. And, I want the text to show and the image to be opacity=0 on a:normal and a:visited, then the text to disappear and the image to be opacity=100 on a:hover and a:active. Whether I use a unordered list or just <p> tags, all of the text piles up on top each other and the images encircle the text like numbers on a clock. The on/off part appears to work fine. Suggestions?

And, what about the "invalid CSS comment?" Is it that the opacity codes have changed? (I haven't investigated yet. Maybe you have.)

(04.08.2006, 07:25)


Your comment:

Your Name:

Stu's First Name - 3 letters (required)

Thanks to Alex for this script.

Please enter your comments for this site page.
Please note that all posts are moderated.

Posting rules

HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'


Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


Facebook Twitter rss feed Facebook Fan Page