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>