Problem- przezroczystosc

[kogutu]

Witam

Od dwoch dni scieram sie prostą rzeczą jaka jest mianowicie kwestia pseudoklasy hover. Chce zrobic styl, dzieki ktoremu po najechaniu na div.box bedzie mi wyskakiwalo mi polprzezroczyste okno a w nim tekst + obrazek. Wszystko idzie latwo i gladko tylko problem tkwi w tym, ze nie moge dojsc doladu z przezroczystoscia- wszystko wyswietlane jest z gory w sytlu dedykowanemu a:hover. Zmiany wewnętrzne ani dokladanie stylow nic nie daja:/ Bardzo prosze o pomoc i pozdrawiam




Style_CSS:

Kod:

div.box  {
    position: relative;
    border: 6px solid #EAEAEA;
    margin-left: 40px !important;
    margin-left: 5px;
    margin-bottom: 10px;
    float: left;
    background: #d1d0d0 no-repeat bottom left;
    left: 9px;
    margin-top: 6px
}

.box a {
    display: block;
    width: 231px;
    height: 196px;
    position: absolute;
    top: 2px;
    left: 2px;
    background: #666;
    filter: alpha(opacity = 0);
    -moz-opacity: .0;
    opacity: .0;
    border: 1px solid #000
}

.box a:hover   {
    position: absolute;
    left: 0;
    top: 0;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
    text-align: center;
    z-index: 2;
    width: 200%;
    height: 200%;
    margin-left: -110px;
    margin-top: -100px;
}

Oraz jego wykorzystanie:

Kod:

<div class="box"><div class="tlo"><a href="link"> <img src="obrazek="opacity.opacity=1; filters.alpha.opacity=100"  "></div> </a>
     <div class="box2">
          <h3><span>Przyklad</span></h3>
          </br>

          </br>

          <div class="more"><span><br><br><br><br><br><br><br><br>Zobacz ofertę</span></div>
        </div>
</div>

[Kartofelek]

1) popraw pisownię. W internecie ma to znaczenie. Przeczytaj swój post jeszcze raz, i nie rób takich gaf na przyszłość. (budujesz przecież swój wizerunek)

Co do problemu:
Sporo osób ma problem ze zrozumieniem działania opacity. Skoro dajesz "pudełku" przezroczystość na 0.4, to jego zawartość też jest przezroczysta. Jeżeli jego zawartości ustawisz opacity na 0.5 to będzie ona wynosiła 0.5 z 0.4.
Proste logiczne ;]

Rozwiązaniem twojego problemu jest zastosowanie diva "kontenera"- czyli dajesz div (position:relative) a w nim 2 divy: div-background (opacity 0.5; position:absolute) i drugi div z treścią (opacity:1, position:absolute)

Zasada działania jak w lightboxie ;]

Pozdrawiam