+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: Problem- przezroczystosc (/thread-problem-przezroczystosc)
Problem- przezroczystosc - kogutu - 24-05-2010
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;
}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>RE: Problem- przezroczystosc - Kartofelek - 24-05-2010
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