[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?

[herWALDI]

[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