Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML]przezroczystość/alpha na hoverze
Forum PHP.pl > Forum > Przedszkole
miras
Witam, chciałbym zrobić przezroczysta przysłonę po najechaniu na obrazek, mam taki kod:


  1.  
  2. #content #data #container .five a {
  3. width: 280px;
  4. height: 490px;
  5. float: right;
  6. margin-left: 10px;
  7. margin-top: 10px;
  8. background-image: url("../images/7x.jpg");
  9. }
  10.  
  11. #content #data #container .five a:hover {
  12. width: 280px;
  13. height: 490px;
  14. background-color: transparent;
  15. background-color: rgba(234, 47, 46, 0.8);
  16. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#3332FA32,endColorstr=#3332FA32);
  17. zoom: 1;
  18. }
  19.  
  20. <div id="content">
  21. <div id="data">
  22. <div id="container">
  23. <div class="five"><a href=""></a></div>
  24. </div>
  25. </div>
  26. </div>
  27.  


proszę o pomoc..
adeptofvoltron
chodziło ci o coś takiego?

http://www.w3schools.com/css/css_image_transparency.asp

czy źle coś rozumiem?
miras
Tak, coś w tym stylu - natomiast mam problem: kod


  1. .one a {
  2. width: 570px;
  3. height: 240px;
  4. float: left;
  5. margin-left: 5px;
  6. margin-top: 5px;
  7. }
  8.  
  9. .one a img:hover {
  10. width: 570px;
  11. height: 240px;
  12. background-color: transparent;
  13. background-color: rgba(234, 47, 46, 0.8);
  14. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#3332FA32,endColorstr=#3332FA32);
  15. zoom: 1;
  16. }
  17.  
  18.  
  19.  
  20. <div class="one"><a href="xxx"><img src="assets/images/1x.jpg"/></a></div>
  21.  
  22.  
  23.  
  24.  
adeptofvoltron
po co "zoom :1" to niczego nie zmienia.

Jeśli chcesz zmienić rozmiar to ja polecam funkcję "http://www.w3schools.com/cssref/css3_pr_transform.asp" z użyciem scale.

chyba że o inny problem ci chodzi biggrin.gif
martex
dodaj w hover np. opacity:0.5;
miras
ok, ogarnąłem to - teraz mam kolejny problem... tekst na tym divie tez jest przezroczysty.. jak temu zaradzic?

kod załączam:

  1. .red {
  2. opacity:0.80;
  3. -ms-filter:" progid: DXImageTransform.Microsoft.Alpha(opacity = 80) ";
  4. filter:alpha(opacity=80);
  5. background-color: transparent;
  6. background-color: rgba(234, 47, 46, 3);
  7. width: 169px;
  8. height: 80px;
  9. float: right;
  10. }
  11.  
  12. .tekstnasg {
  13. color: #fff;
  14. font-family: Oswald;
  15. font-size: 24px;
  16. text-align: center;
  17. }
  18.  
  19.  
  20. <div class="red"><div class="tekstnasg">ten tekst jest przezroczysty</div></div>
  21.  
toffiak
http://jsfiddle.net/dJ5jV/

Trochę zmodyfikowałem twój kod, dodałem paragraf z tekstem aby pokazac że tekst na divie nie jest transparentny.
Usunąłem niepotrzebne transparentności, transparente jest tylko tło diva, 4 argument rgba za to odpowiada, wartości jakie przyjmuje to od 0.0 do 1.0.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.