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
herWALDI
post
Post #2





Grupa: Zarejestrowani
Postów: 41
Pomógł: 1
Dołączył: 14.05.2013

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


  1. <div class="test1">
  2. <img src="http://placehold.it/200x200" />
  3. <div class="tekst-div">
  4. <p>TEKST</p>
  5. </div>
  6. </div>



  1. .test1 {
  2. width: auto;
  3. height: auto;
  4. float: left;
  5. padding: 0;
  6. position: relative;
  7. background-color: black;
  8. }
  9.  
  10. .test1:hover img {
  11. opacity: 0.3;
  12. }
  13.  
  14. .test1:hover .tekst-div {
  15. opacity: 1;
  16. }
  17.  
  18. .test1 img {
  19. padding: 0;
  20. width: 100%;
  21. display: block;
  22. opacity: 1;
  23. }
  24.  
  25. .test1 img, .tekst-div {
  26. -webkit-transition: opacity 0.5s ease-out;
  27. -moz-transition: opacity 0.5s ease-out;
  28. -o-transition: opacity 0.5s ease-out;
  29. transition: opacity 0.5s ease-out;
  30. }
  31.  
  32. .tekst-div {
  33. position: absolute;
  34. color: white;
  35. left: 0;
  36. top: 25%;
  37. right: 0;
  38. bottom: 0;
  39. font-size: 24px;
  40. text-align: center;
  41. opacity: 0;
  42. }
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: 6.10.2025 - 17:37