Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS][HTML] Tekst i przyciemnienie na obrazku
annow
post
Post #1





Grupa: Zarejestrowani
Postów: 17
Pomógł: 0
Dołączył: 9.07.2016

Ostrzeżenie: (0%)
-----


Witam, chcę zrobić aby na obrazku po najechaniu pojawił się tekst, przyciemnienie zrobiłem opcją
  1. .obrazek1:hover { filter: brightness(30%); }

a w HTML:
  1. <img class="obrazek1" src="obrazek1.png" />
i chcę aby po najechaniu pojawił się tekst, ktoś ma jakieś pomysły?
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi
trueblue
post
Post #2





Grupa: Zarejestrowani
Postów: 6 807
Pomógł: 1828
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


font-size:0 -> font-size:100px
Go to the top of the page
+Quote Post
annow
post
Post #3





Grupa: Zarejestrowani
Postów: 17
Pomógł: 0
Dołączył: 9.07.2016

Ostrzeżenie: (0%)
-----


Cytat(trueblue @ 11.07.2016, 17:17:57 ) *
font-size:0 -> font-size:100px


matko, działa

  1. .test1 {
  2. position:relative;
  3. font-size: 0px;
  4. }
  5. .test1:hover {
  6. -webkit-filter: brightness(30%);
  7. filter: brightness(30%);
  8. -webkit-transition: all 1s linear;
  9. -moz-transition: all 1s linear;
  10. -ms-transition: all 1s linear;
  11. -o-transition: all 1s linear;
  12. transition: all 1s linear;
  13. font-size: 20px;
  14. color: yellow;
  15. }
  16.  
  17. .obra1:hover {
  18. position: absolute;
  19. z-index:-1;
  20. }


jest jeszcze jeden problem, wszystko pięknie przyciemnia się tekst się wyświetla, ale gdy najadę już na tekst po przyciemnieniu, wskakuje on za obrazek

chcę uzyskać coś takiego jak na tej stronie: http://jems.pl/projekty/wybrane-prace/

Ten post edytował annow 11.07.2016, 16:27:13
Go to the top of the page
+Quote Post

Posty w temacie
- annow   [CSS][HTML] Tekst i przyciemnienie na obrazku   11.07.2016, 12:22:13
- - trueblue   Zdjęcie umieść w dodatkowym kontenerze, tam równie...   11.07.2016, 12:43:44
|- - annow   Cytat(trueblue @ 11.07.2016, 13:43:44...   11.07.2016, 13:13:51
- - herWALDI   [HTML] pobierz, plaintext <div class="test...   11.07.2016, 13:45:46
- - trueblue   Dla obrazka ma być position:absolute;   11.07.2016, 13:47:41
|- - annow   Cytat(trueblue @ 11.07.2016, 14:47:41...   11.07.2016, 14:12:51
- - trueblue   Dla obrazka z-index:-1 Dla div position:relative;   11.07.2016, 14:18:44
|- - annow   Cytat(trueblue @ 11.07.2016, 15:18:44...   11.07.2016, 14:32:17
- - trueblue   Te właściwości ustawiasz na zwykły stan, nie na :h...   11.07.2016, 14:33:37
|- - annow   Cytat(trueblue @ 11.07.2016, 15:33:37...   11.07.2016, 14:35:48
- - trueblue   position i z-index dodajesz przy zwykłym stanie. b...   11.07.2016, 14:38:09
|- - annow   Cytat(trueblue @ 11.07.2016, 15:38:09...   11.07.2016, 15:31:58
- - trueblue   :hover na div, nie na obrazku. Dokładnie tak jak w...   11.07.2016, 15:41:06
|- - annow   Cytat(trueblue @ 11.07.2016, 16:41:06...   11.07.2016, 15:46:25
- - trueblue   https://jsfiddle.net/4t29s6ws/   11.07.2016, 15:48:23
|- - annow   Cytat(trueblue @ 11.07.2016, 16:48:23...   11.07.2016, 15:49:52
- - trueblue   Nie ma problemu. Musisz zastosować jedną z metod, ...   11.07.2016, 15:59:22
|- - annow   Cytat(trueblue @ 11.07.2016, 16:59:22...   11.07.2016, 16:12:20
- - trueblue   font-size:0 -> font-size:100px   11.07.2016, 16:17:57
|- - annow   Cytat(trueblue @ 11.07.2016, 17:17:57...   11.07.2016, 16:21:42
- - trueblue   Bez sensu. Znów ustawiasz position i z-index dla o...   11.07.2016, 16:30:51
|- - annow   Cytat(trueblue @ 11.07.2016, 17:30:51...   11.07.2016, 16:33:19
- - trueblue   https://jsfiddle.net/4t29s6ws/3/   11.07.2016, 16:56:58
|- - annow   Cytat(trueblue @ 11.07.2016, 17:56:58...   11.07.2016, 21:46:11
- - trueblue   Tu jest rozwiązane zmianą z-index napisu: https://...   11.07.2016, 21:55:56


Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 13.10.2025 - 16:30