[CSS][HTML] Tekst i przyciemnienie na obrazku Opcje

[annow]

Witam, chcę zrobić aby na obrazku po najechaniu pojawił się tekst, przyciemnienie zrobiłem opcją

[HTML] pobierz, plaintext 
.obrazek1:hover {  filter: brightness(30%); }
[HTML] pobierz, plaintext 

a w HTML:

[HTML] pobierz, plaintext 
<img class="obrazek1" src="obrazek1.png" />
[HTML] pobierz, plaintext 

i chcę aby po najechaniu pojawił się tekst, ktoś ma jakieś pomysły?

[trueblue]

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

[annow]

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. (IMG:style_emoticons/default/sad.gif)

HTML:

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

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

Ten post edytował annow 11.07.2016, 13:27:02