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?

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.

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 

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

[CSS] pobierz, plaintext 
.test1 {
  width: auto;
  height: auto;
  float: left;
  padding: 0;
  position: relative;
  background-color: black;
}
 
.test1:hover img {
  opacity: 0.3;
}
 
.test1:hover .tekst-div {
  opacity: 1; 
}
 
.test1 img {
  padding: 0;
  width: 100%;
  display: block;
  opacity: 1;
}
 
.test1 img, .tekst-div {
  -webkit-transition: opacity 0.5s ease-out;
  -moz-transition: opacity 0.5s ease-out;
  -o-transition: opacity 0.5s ease-out;
  transition: opacity 0.5s ease-out;
}
 
.tekst-div {
  position: absolute;
  color: white;
  left: 0;
  top: 25%;
  right: 0;
  bottom: 0;
  font-size: 24px;
  text-align: center;
  opacity: 0;
}
[CSS] pobierz, plaintext 

Dla obrazka ma być position:absolute;

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

[HTML] pobierz, plaintext 
.test1:hover {
   -webkit-filter: brightness(30%);
   filter: brightness(30%);
   -webkit-transition: all 1s linear;
   -moz-transition: all 1s linear;
   -ms-transition: all 1s linear;
   -o-transition: all 1s linear;
   transition: all 1s linear;
}
[HTML] pobierz, plaintext 

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

tylko się przyciemnia

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.

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 
.divek {
	position: relative;
}
 
.obrazek {
	transition: all 1s linear;
	filter: brightness(30%);
	-webkit-filter: brightness(30%);
	position: absolute;
	z-index: -1;
}
 
<div class="divek">
<img class="obrazek" src="obr1.png">OBRAZEK</img>
</div>
[HTML] pobierz, plaintext 

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

coś takiego?

[HTML] pobierz, plaintext 
.divek {
	position: relative;
}
 
.obrazek {
	position: absolute;
	z-index: -1;
}
.obrazek:hover {
	transition: all 1s linear;
	filter: brightness(30%);
	-webkit-filter: brightness(30%);
}
[HTML] pobierz, plaintext 

nawet się nie przyciemnia, po prostu tekst jest na obrazku

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

jestem na to za głupi chyba...

[HTML] pobierz, plaintext 
.divek:hover {
	position: relative;
}
 
.obrazek {
	transition: all 1s linear;
	filter: brightness(30%);
	-webkit-filter: brightness(30%);
	position: absolute;
	z-index: -1;
}
[HTML] pobierz, plaintext 

efekt jest taki, że obrazek cały czas jest przyciemniony i cały czas jest na nim tekst.

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

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 
.test1 {
  position:relative;
  visibility:hidden;
}
.test1:hover {
   -webkit-filter: brightness(30%);
   filter: brightness(30%);
   -webkit-transition: all 1s linear;
   -moz-transition: all 1s linear;
   -ms-transition: all 1s linear;
   -o-transition: all 1s linear;
   transition: all 1s linear;
   font-size: 40px;
}
 
.obra1 {
	position: absolute;
	font-size: 100px;
	font-color: yellow;
  z-index:-1;
}
[HTML] pobierz, plaintext 

oraz

[HTML] pobierz, plaintext 
<div class="test1">
<img class="obra1" src="obrazek1.png" width="200" height="200" />bla bDDDDDdddddddla</div>
[HTML] pobierz, plaintext 

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

matko, działa

[HTML] pobierz, plaintext 
.test1 {
  position:relative;
  font-size: 0px;
}
.test1:hover {
   -webkit-filter: brightness(30%);
   filter: brightness(30%);
   -webkit-transition: all 1s linear;
   -moz-transition: all 1s linear;
   -ms-transition: all 1s linear;
   -o-transition: all 1s linear;
   transition: all 1s linear;
   font-size: 20px;
   color: yellow;
}
 
.obra1:hover {
	position: absolute;
    z-index:-1;
}
[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/

Bez sensu. Znów ustawiasz position i z-index dla obrazka na :hover.

ale bez dodania hover dla .obra1 nie działa

[HTML] pobierz, plaintext 
.test1 {
  position:relative;
  font-size: 0px;
}
.test1:hover {
   -webkit-filter: brightness(30%);
   filter: brightness(30%);
   -webkit-transition: all 1s linear;
   -moz-transition: all 1s linear;
   -ms-transition: all 1s linear;
   -o-transition: all 1s linear;
   transition: all 1s linear;
   font-size: 20px;
   color: red;
   font-family: Arial;
}
 
.obra1 {
	position: absolute;
    z-index:-1;
}
[HTML] pobierz, plaintext 

https://jsfiddle.net/4t29s6ws/3/

Jestem Ci bardzo wdzięczny, dziękuję za pomoc

Tu jest rozwiązane zmianą z-index napisu:
https://jsfiddle.net/4t29s6ws/4/