SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2005
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to add transparate div?

    Hi

    I have this page
    http://screencast.com/t/L3JBrbf2Q9

    and I want for each div to create this effect if the status of the ad is freez:
    http://screencast.com/t/iseVW2ZzcqC

    How can I add the semi transparent div? using z-index?

    thanks

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Hm, yeah, you could have an actual semi-transparent div, if you don't mind it not working on IE6/7 (you may not be supporting those anyway).

    The div you want to cover over:
    <div>
    stuff inside
    </div>

    Since I don't know the markup, let's pretend that div has a class of "covered".

    <div class="covered">
    stuff inside
    </div>

    I would put the overlay semi-trans div inside covered.

    <div class="covered">
    stuff inside
    <div class="overlay"></div>
    </div>

    Now the overlay is a child of the div you want to cover.

    You would do something like

    .covered {
    all your current css styles...
    position: relative;
    }
    so that it becomes a positioned parent.

    Now with the overlay we can


    .overlay {
    position: absolute;
    left: 0;
    right: 0; /*mostly just for IE, it may not need this*/
    top: 0;
    width: 100%; /*100% of its parent, "covered"
    height: 100%; /*100% of its parent... "covered may need to have an explicit height for this to work*/
    background: rgba(51,51,51,0.2);
    }

    Background with a colour with alpha channel might work better than opacity, otherwise you could instead do
    background-color: #333;
    opacity: 0.2;

    Another option is, if you want that blue stamp to be there while the rest looks faded out, you could make an image with a semi-transparent greyish layer and the fully opaque stamp on top, flatten it to a 24- or 32-bit PNG and just have that be a background image of "overlay" which then will not have any opacity or rgba settings in the CSS.


Bookmarks

Posting Permissions

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