Problem z przyciemnieniem obrazka css

Witajcie, jestem tu pierwszy raz i mam nadzieje że mi pomożecie:)
Już zgłupiałem, robiłem wiele rzeczy i nic mi nie wychodziło, otóż chcę wykonać takie coś że po najechaniu na obrazek, obrazek się przyciemniał lecz tekst który jest w obrazku zostawał bez przyciemnienia…
Na początku zrobiłem tak że na div nadałem background, jakiś dany obrazek i go przyciemniałem lecz i przyciemniał mi się tekst który był w tym kontenerze…
a teraz dałem tak że do kontenera div dodałem <img src… i wszystko jest ok bo dałem przyciemnienie tylko na img i po najechaniu na kontener przyciemnia mi się tylko obrazek a tekst zostaje bez zmian… tylko jest jeden problem bo jak najeżdżam na tekst całkowicie znika mi przyciemnienie obrazka… ;/ co mogę zmienić? lub dodać żeby po najechaniu myszką na tekst obrazek pozostawał przyciemniony…
Dodaje kod który zrobiłem
html:

<div class="belka_lewa">
				<img src="img/16.jpg">
            	<h2>PRIVAT</h2>
            	<ul>
            		<li>Schiebetore</li>
            		<li>Flügeltore</li>
            		<li>Pforteneingang</li>
            		<li>Zaunfelder und Pfosten</li>
            		<li>Garagentore</li>
            	</ul>
            </div>

kod css:

.belka_lewa {
float: left;
width: 821px;
height: 566px;
margin-right: 20px;

}

.belka_lewa img {
position: absolute;
}

.belka_lewa > h2 {
display: none;
position: relative;
}

.belka_lewa > ul {
display: none;
position: relative;
}

.belka_lewa img:hover {
filter: brightness(30%);

}

.belka_lewa:hover > h2 {
display: block;
color: #fff;
position: relative;
left: 20%;
top: 20%;
}

.belka_lewa:hover > ul {
display: block;
color: #fff;
position: relative;
left: 20%;
top: 20%;
}

.belka_lewa:hover > ul li {
font-size: 16px;
line-height: 2;
}

nikt nie ma pomysłu jak to rozwiązać ? :frowning:

Daj hover na kontener w tedy będzie działało

.belka_lewa:hover img {
filter: brightness(30%);

}

2 polubienia

Działa :slight_smile: nie które proste rozwiązania są najtrudniejsze :slight_smile: dziękuje jeszcze raz:)