<p>Does anybody know a way with JavaScript or CSS to basically grey out a certain part of a form/div in HTML?</p>

<p>I have a '<em>User Profile</em>' form where I want to disable part of it for a '<em>Non-Premium</em>' member, but want the user to see what is behind the form and place a '<em>Call to Action</em>' on top of it.</p>

<p>Does anybody know an easy way to do this either via CSS or JavaScript?</p>

<p>Edit: I will make sure that the form doesn't work on server side so CSS or JavaScript will suffice.</p>

Add this to your HTML:
```
```
<div id="darkLayer" class="darkClass" style="display:none"></div>
```
```
And this to your CSS:
```
```
.darkClass
{
    background-color: white;
    filter:alpha(opacity=50); /* IE */
    opacity: 0.5; /* Safari, Opera */
    -moz-opacity:0.50; /* FireFox */
    z-index: 20;
    height: 100%;
    width: 100%;
    background-repeat:no-repeat;
    background-position:center;
    position:absolute;
    top: 0px;
    left: 0px;
}
```
```
And finally this to turn it off and on with JavaScript:
```
```
function dimOff()
{
    document.getElementById("darkLayer").style.display = "none";
}
function dimOn()
{
    document.getElementById("darkLayer").style.display = "";
}
```
```
Change the dimensions of the darkClass to suite your purposes.