I can't get the hover effect right - html

Question

I can't get the hover effect right. I have a block with a picture and text in it. When hovering over the picture - should change the fill, filter: brightness. It does, but if I hover over the text which is in the middle of the picture, the text overlaps the picture and the hover effect doesn't work. If I put filter: brightness on the whole block, not only on the image, then the text gets filled too and becomes black. And my task is to change only the color of the picture, but not the text. What am I doing wrong?
.blocks
h5
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: inline-block
text-align: center;
color: white;
font-size: 18px;
img
filter: brightness(0.28)
&:hover
filter: brightness(0.7)

Answer 1

please make sure to put your relevant code (HTML and CSS) into an Stack-Snippet, so everyone here can easy reproduce the problem!
If you want to change the IMG-style when hovering the parent-element, use .parentElementClass:hover img{}
.blocks {
position: relative;
display: inline-block;
width: 150px;
}
.blocks h5 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: inline-block;
text-align: center;
color: white;
font-size: 18px;
z-index: 2;
}
.blocks img {
filter: brightness(0.28);
z-index: 1;
}
.blocks:hover img {
filter: brightness(0.7);
}
<div class="blocks">
<h5>headline 5</h5>
<img src="https://via.placeholder.com/150/000000/" />
</div>