Transparent Hide/Show div

[TheBIGcube]

Hi

How do I create a transparent div, that appears upon a link being clicked, and disappears upon another link being clicked?

TheBIGCube

[Paul O'B]

This is a really a javascript question and you basically toggle an element on and off via javascript using various methods.

Here are some old examples:

http://www.pmob.co.uk/temp/hideandshow7.htm
http://www.pmob.co.uk/temp/2col-toggle2.htm

Of course these should be updated to use unobtrusive techniques.

The nearest you can get in css (without javascript) is something like this which will only work in firefox and IE.

http://www.pmob.co.uk/temp/hideandshow3-css.htm

[DaveWoods]

You shouldn't do that with CSS, you'll need JavaScript.

Make sure it's not critical functionality though as any users without JavaScript will be unable to use your site.

[TheBIGcube]

How do I make a div transparent?

TheBIGCube.

[junjun]

How do I make a div transparent?

Did you have a look at the links Paul gave you?

[Paul O'B]

How do I make a div transparent?

You are unlikely to get a good response if you don't provide a reasonable explanation as to what you want. If our answers haven't answered your question then at least spend some time on your question (as we have done on the answers).

In answer to your second post then the answer is you don't have to do anything to a div to make it transparent because its background is already transparent by default.

[TheBIGcube]

My Apologies

In my second post, I meant how do I make a div transparent that contains a background colour?

TheBIGCube.

[Paul O'B]

HI,

Well you basically have 2 choices. You can use the filter property to add opacity to the element but it will also make the foreground opaque also.

See the drop downs in this example.

http://www.pmob.co.uk/temp/drop-down-multi-opaque.htm

They are made opaque using this format:

li 
{
   color: #fff;
   background-color: red;
/*opacity for IE5+*/
  filter: alpha(opacity=50);
  /*opacity for older Mozilla browsers*/
  -moz-opacity: 0.5;
  /*opacity for mozilla/safari/opera*/
  opacity: 0.5;
}

opacity is css3 and the others are proprietary code so it won't validate. The drawback is that the text gets faded as well.

The alternative is to use a background png but again for ie6 you need to use a proprietary filter to make it work as IE6- doesn't understand partial transparency.

e.g.

http://www.pmob.co.uk/temp/transparent-test.htm
http://www.pmob.co.uk/temp/opacity5.htm

View source to see the code as it is in the head and should be self explanatory.

[DaveWoods]

Paul, they're all great suggestions for semi-transparency but is there anything wrong with just using

background-color: transparent;

[Paul O'B]

Hi Dave,

That will just make the divs background completely transparent which is its default state anyway. If you want opacity (partial transparency) that operates on the current elements background content then you need the filter.


Hope that's what you meant

[DaveWoods]

Kind of, I was just wondering whether somehow a background colour was being applied and TheBIGcube was asking how to change it back to being transparent and it was that simple.

Maybe a :hover effect being applied that meant it needed complete transparency for example.

I know questions aren't usually that simply to answer though

[Paul O'B]

Kind of, I was just wondering whether somehow a background colour was being applied and TheBIGcube was asking how to change it back to being transparent and it was that simple.

Yes of course that would be correct and may indeed be what bigcube wanted I was just guessing at what was wanted

[DaveWoods]

I was just guessing at what was wanted

Aren't we all

[TheBIGcube]

Basically, I need a div that has a background colour, and is 50% transparent.

[Paul O'B]

Basically, I need a div that has a background colour, and is 50% transparent.

Then your question was answered in post #8

http://www.pmob.co.uk/temp/opacity5.htm

Use a png image at 50% opacity and apply it as shown in the demo.

Alternatively if you don't mind the foreground also being opaque then use the code from post #8: