asked on

How are they pulling off this opacity effect?

Head out to http://www.americanidol.com/ and click on the "contestants" link at the top. What's revealed is a series of photos that go from a faded look to a full opacity dynamic.

I've been hunting around for the opacity qualifier, but I have yet to find something that works within the kind of css menu that appears to be the case with idol.

For example, when I try this:

      #nav ul {
            display: none;
            margin: 0;
            padding: 0;
            width: 200px;
            position: absolute;
            top: 26px;
            left: 0;
            background: #ffffff;
            opacity:0.4;
            filter:alpha(opacity=40);

Everything shuts down.

What am I doing wrong?

Jesse Matlock

try something like this:

#nav li a
a {
	background: #fff;

        /* Theoretically for IE 8 & 9 (more valid) */
        /* ...but not required as filter works too */
        /* should come BEFORE filter */
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0.5)";

        /* This works in IE 8 & 9 too */
        /* ... but also 5, 6, 7 */
        filter: alpha(opacity=0.5);

        /* Older than Firefox 0.9 */
        -moz-opacity:0.5;

        /* Safari 1.x (pre WebKit!) */
        -khtml-opacity: 0.5;

        /* Modern!
        /* Firefox 0.9+, Safari 2?, Chrome any version?
        /* Opera 9+, IE 9+ */
        opacity: 0.5;

}
#nav li a:hover {
	background: transparent;
        /* Theoretically for IE 8 & 9 (more valid) */
        /* ...but not required as filter works too */
        /* should come BEFORE filter */
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";

        /* This works in IE 8 & 9 too */
        /* ... but also 5, 6, 7 */
        filter: alpha(opacity=1);

        /* Older than Firefox 0.9 */
        -moz-opacity:1;

        /* Safari 1.x (pre WebKit!) */
        -khtml-opacity: 1;

        /* Modern!
        /* Firefox 0.9+, Safari 2?, Chrome any?
        /* Opera 9+, IE 9+ */
        opacity: 1;

}

Open in new window

Jesse Matlock

oops.. typed too fast.. there is an extra 'a' at the start of line 2, remove that, and it will work better :)

ASKER CERTIFIED SOLUTION

Jesse Matlock

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Jesse Matlock

Excellent.. glad that worked for you.