?
Solved

How are they pulling off this opacity effect?

Posted on 2011-10-20
4
Medium Priority
?
282 Views
Last Modified: 2012-05-12
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?
0
Comment
Question by:brucegust
  • 4
4 Comments
 
LVL 8

Expert Comment

by:Jesse Matlock
ID: 37004142
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

0
 
LVL 8

Expert Comment

by:Jesse Matlock
ID: 37004147
oops.. typed too fast.. there is an extra 'a'  at the start of line 2, remove that, and it will work better :)
0
 
LVL 8

Accepted Solution

by:
Jesse Matlock earned 2000 total points
ID: 37004166
for your site, if you are trying to make your submenu items display with less opacity, until you hover.. do this:

/* RIGHT AFTER line 153 (#nav  ul code ends) - place this code */

	#nav:first-child ul li a {
		background: #000;
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0.7)";
       filter: alpha(opacity=0.7);
       -moz-opacity:0.7;
       -khtml-opacity: 0.7;
       opacity: 0.7;
       text-shadow: none !important;

	}
	#nav:first-child ul li a:hover {
		background: #000;
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
       filter: alpha(opacity=1);
       -moz-opacity:1;
       -khtml-opacity: 1;
       opacity: 1;
	}

Open in new window

0
 
LVL 8

Expert Comment

by:Jesse Matlock
ID: 37021312
Excellent.. glad that worked for you.
0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
Suggested Courses
Course of the Month15 days, 12 hours left to enroll

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question