Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Exclamation CSS Opacity Problem

    Hi, I'm mixing a bit of javascript and CSS together, and what I've got it doing is, when you click on the image of the page, it brings up the enlarged image in the middle of a solid-color div. You click on the image to get the full size and the div to disappear. However, I want the div itself to be somewhat transparent, so I've set it's opacity to .5 (I know this doesn't work on IE, and you need the alpha thingy). I then set the image opacity to 1 and the text opacity to 1 as well. But when I click on the image, everything in the div is .5 transparent and not opaque.

    Here's the code:
    Code:
    #divId
    {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      min-height: 100%;
      padding: 3em;
      opacity: .5;
      background-color: rgb(220, 8, 21);
      z-index: 1;
    }
    
    #divId img
    {
      margin: auto;
      z-index: 1;
      opacity: 1;
      display: block;
    }
    And then the text also has it's opacity set to 1.

    Here's the URL for those who want to see what it does: http://z.cs.utexas.edu/users/cs329e/...childhood.html

    Right now the script only works in Firefox.

    Thank you so much.

  • #2
    Regular Coder
    Join Date
    Oct 2007
    Posts
    148
    Thanks
    4
    Thanked 4 Times in 4 Posts
    If the opacity for the #divId is set to .5, it will apply that opacity to everything contained inside of it, including text, images, and other divs. Annoying, but it does. I have yet to find a way to get around it. :/


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •