Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

2 Stron V   1 2 >  
 Reply to this topicStart new topic
> [CSS][HTML] Tekst i przyciemnienie na obrazku
annow
post 11.07.2016, 12:22:13
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ą 
[HTML] pobierz, plaintext 
  1. .obrazek1:hover {  filter: brightness(30%); }
[HTML] pobierz, plaintext

a w HTML: 
[HTML] pobierz, plaintext 
  1. <img class="obrazek1" src="obrazek1.png" />
[HTML] pobierz, plaintext
i chcę aby po najechaniu pojawił się tekst, ktoś ma jakieś pomysły?
Go to the top of the page
+Quote Post
trueblue
post 11.07.2016, 12:43:44
Post #2





Grupa: Zarejestrowani
Postów: 6 799
Pomógł: 1827
Dołączył: 11.03.2014

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

Zdjęcie umieść w dodatkowym kontenerze, tam również tekst.
Np.:
<div><img/>bla bla</div>

Wtedy :hover dodaj do <div>.
brightness + font-size

lub:
<div><img/><span>bla bla</span></div>
brightness + display

Możesz też dodawać tekst do pseudoselektora ::after dla div:hover, ale nie polecam tej metody.

Ten post edytował trueblue 11.07.2016, 12:45:34


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
annow
post 11.07.2016, 13:13:51
Post #3





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

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

Cytat(trueblue @ 11.07.2016, 13:43:44 ) *
Zdjęcie umieść w dodatkowym kontenerze, tam również tekst.
Np.:
<div><img/>bla bla</div>

Wtedy :hover dodaj do <div>.
brightness + font-size

lub:
<div><img/><span>bla bla</span></div>
brightness + display

Możesz też dodawać tekst do pseudoselektora ::after dla div:hover, ale nie polecam tej metody.


zrobiłem coś takiego, i tekst pojawia się obok obrazka a nie na nim. sad.gif

HTML:
[HTML] pobierz, plaintext 
  1. <div class="test1">
  2. <a href="podstrona1.html"><img class="obr1" src="obrazek1.png" />bla bla</a>
  3. </div>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
  1. CSS:
  2. .test1:hover {
  3. 	filter: brightness(30%);
  4. 	font-size: 18px;
  5. 	transition: all 1s linear;
  6. }
[HTML] pobierz, plaintext


Ten post edytował annow 11.07.2016, 13:27:02
Go to the top of the page
+Quote Post
herWALDI
post 11.07.2016, 13:45:46
Post #4





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

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

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



[CSS] pobierz, plaintext 
  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. }
[CSS] pobierz, plaintext
Go to the top of the page
+Quote Post
trueblue
post 11.07.2016, 13:47:41
Post #5





Grupa: Zarejestrowani
Postów: 6 799
Pomógł: 1827
Dołączył: 11.03.2014

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

Dla obrazka ma być position:absolute;


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
annow
post 11.07.2016, 14:12:51
Post #6





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

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

Cytat(trueblue @ 11.07.2016, 14:47:41 ) *
Dla obrazka ma być position:absolute;

[HTML] pobierz, plaintext 
  1. .obr1 {
  2. 	position: absolute;
  3. 	font-size: 100px;
  4. 	font-color: yellow;
  5. }
[HTML] pobierz, plaintext 



[HTML] pobierz, plaintext 
  1. .test1:hover {
  2.    -webkit-filter: brightness(30%);
  3.    filter: brightness(30%);
  4.    -webkit-transition: all 1s linear;
  5.    -moz-transition: all 1s linear;
  6.    -ms-transition: all 1s linear;
  7.    -o-transition: all 1s linear;
  8.    transition: all 1s linear;
  9. }
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. <div class="test1">
  2. <a href="obraz.html"><img class="obr1" src="obraz1.png" />bla bDDDDDDla</a>
  3. </div>
[HTML] pobierz, plaintext


tylko się przyciemnia
Go to the top of the page
+Quote Post
trueblue
post 11.07.2016, 14:18:44
Post #7





Grupa: Zarejestrowani
Postów: 6 799
Pomógł: 1827
Dołączył: 11.03.2014

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

Dla obrazka z-index:-1

Dla div position:relative;



--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
annow
post 11.07.2016, 14:32:17
Post #8





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

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

Cytat(trueblue @ 11.07.2016, 15:18:44 ) *
Dla obrazka z-index:-1

Dla div position:relative;


Udało mi się zrobić, że bez najechania tekst jest obok, a po najechaniu obrazek wskakuje na obrazek, o to mi chodziło, ale nie chcę żeby bez najechania był obok niego.
Go to the top of the page
+Quote Post
trueblue
post 11.07.2016, 14:33:37
Post #9





Grupa: Zarejestrowani
Postów: 6 799
Pomógł: 1827
Dołączył: 11.03.2014

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

Te właściwości ustawiasz na zwykły stan, nie na :hover.


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
annow
post 11.07.2016, 14:35:48
Post #10





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

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

Cytat(trueblue @ 11.07.2016, 15:33:37 ) *
Te właściwości ustawiasz na zwykły stan, nie na :hover.

okej, ale ja chcę żeby przyciemnienie pojawiało się po najechaniu jak i tekst. teraz jest od razu przyciemniony i tekst na obrazku jest stale.

[HTML] pobierz, plaintext 
  1. .divek {
  2. 	position: relative;
  3. }
  4.  
  5. .obrazek {
  6. 	transition: all 1s linear;
  7. 	filter: brightness(30%);
  8. 	-webkit-filter: brightness(30%);
  9. 	position: absolute;
  10. 	z-index: -1;
  11. }
  12.  
  13. <div class="divek">
  14. <img class="obrazek" src="obr1.png">OBRAZEK</img>
  15. </div>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
trueblue
post 11.07.2016, 14:38:09
Post #11





Grupa: Zarejestrowani
Postów: 6 799
Pomógł: 1827
Dołączył: 11.03.2014

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

position i z-index dodajesz przy zwykłym stanie.
brightness na :hover (tak jak miałeś wcześniej).


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
annow
post 11.07.2016, 15:31:58
Post #12





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

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

Cytat(trueblue @ 11.07.2016, 15:38:09 ) *
position i z-index dodajesz przy zwykłym stanie.
brightness na :hover (tak jak miałeś wcześniej).


coś takiego?
[HTML] pobierz, plaintext 
  1. .divek {
  2. 	position: relative;
  3. }
  4.  
  5. .obrazek {
  6. 	position: absolute;
  7. 	z-index: -1;
  8. }
  9. .obrazek:hover {
  10. 	transition: all 1s linear;
  11. 	filter: brightness(30%);
  12. 	-webkit-filter: brightness(30%);
  13. }
[HTML] pobierz, plaintext


nawet się nie przyciemnia, po prostu tekst jest na obrazku
Go to the top of the page
+Quote Post
trueblue
post 11.07.2016, 15:41:06
Post #13





Grupa: Zarejestrowani
Postów: 6 799
Pomógł: 1827
Dołączył: 11.03.2014

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

:hover na div, nie na obrazku.
Dokładnie tak jak wcześniej.


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
annow
post 11.07.2016, 15:46:25
Post #14





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

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

Cytat(trueblue @ 11.07.2016, 16:41:06 ) *
:hover na div, nie na obrazku.
Dokładnie tak jak wcześniej.

jestem na to za głupi chyba...

[HTML] pobierz, plaintext 
  1. .divek:hover {
  2. 	position: relative;
  3. }
  4.  
  5. .obrazek {
  6. 	transition: all 1s linear;
  7. 	filter: brightness(30%);
  8. 	-webkit-filter: brightness(30%);
  9. 	position: absolute;
  10. 	z-index: -1;
  11. }
[HTML] pobierz, plaintext


efekt jest taki, że obrazek cały czas jest przyciemniony i cały czas jest na nim tekst. sad.gif
Go to the top of the page
+Quote Post
trueblue
post 11.07.2016, 15:48:23
Post #15





Grupa: Zarejestrowani
Postów: 6 799
Pomógł: 1827
Dołączył: 11.03.2014

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

https://jsfiddle.net/4t29s6ws/


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
annow
post 11.07.2016, 15:49:52
Post #16





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

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

Cytat(trueblue @ 11.07.2016, 16:48:23 ) *
https://jsfiddle.net/4t29s6ws/

Okej, ale tekst jest cały czas widoczny na obrazku, a ja chcę żeby on był widoczny tylko po najechaniu na niego, wraz z przyciemnieniem pojawia się tekst, o to mi chodzi sad.gif
Go to the top of the page
+Quote Post
trueblue
post 11.07.2016, 15:59:22
Post #17





Grupa: Zarejestrowani
Postów: 6 799
Pomógł: 1827
Dołączył: 11.03.2014

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

Nie ma problemu.
Musisz zastosować jedną z metod, które podałem na początku.
Trzeba jakoś ukryć tekst przed najechaniem.


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
annow
post 11.07.2016, 16:12:20
Post #18





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

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

Cytat(trueblue @ 11.07.2016, 16:59:22 ) *
Nie ma problemu.
Musisz zastosować jedną z metod, które podałem na początku.
Trzeba jakoś ukryć tekst przed najechaniem.

Wybrałem metodę z divem, nie ze spanem i próbowałem ukryć i zakryło mi wszystko...

[HTML] pobierz, plaintext 
  1. .test1 {
  2.   position:relative;
  3.   visibility:hidden;
  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: 40px;
  14. }
  15.  
  16. .obra1 {
  17. 	position: absolute;
  18. 	font-size: 100px;
  19. 	font-color: yellow;
  20.   z-index:-1;
  21. }
[HTML] pobierz, plaintext


oraz 

[HTML] pobierz, plaintext 
  1. <div class="test1">
  2. <img class="obra1" src="obrazek1.png" width="200" height="200" />bla bDDDDDdddddddla</div>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
trueblue
post 11.07.2016, 16:17:57
Post #19





Grupa: Zarejestrowani
Postów: 6 799
Pomógł: 1827
Dołączył: 11.03.2014

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

font-size:0 -> font-size:100px


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
annow
post 11.07.2016, 16:21:42
Post #20





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

[HTML] pobierz, plaintext 
  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. }
[HTML] pobierz, plaintext


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
« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 16.05.2025 - 10:11
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn