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;
}
nie które proste rozwiązania są najtrudniejsze