Adding hover state to sibling - html

Question

I have an image that has a hover state that changes two things: it darkens the image and it displays absolute positioned text over the image. The issue I'm having is when I hover over the text the image is no longer showing darkened. I've tried adding a hover state to the text as well. The image and hover text are siblings so I tried using the ~ following-sibling combinator like this: .hovertext:hover ~ .hoverimg but obviously I'm not using it correctly.
Code
.wrapper {
position: relative;
text-align: center;
}
.hovertext {
display: none;
color: white;
font-size: 30px;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.wrapper:hover .hovertext {
display: block;
}
.hoverimg:hover,
.hovertext:hover~.hoverimg {
filter: brightness(50%);
}
<div class="wrapper">
<img class="hoverimg" src="https://loremflickr.com/320/240">
<div class="hovertext">HOVER TEXT</div>
</div>
Is there a way to show both hover states with CSS only?

Answer 1

Use pointer-events:none to the text if there is no hover or click event on text
Stack Snippet
.wrapper {
position: relative;
text-align: center;
}
.hovertext {
display: none;
color: white;
font-size: 30px;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
pointer-events: none;
}
.wrapper:hover .hovertext {
display: block;
}
.hoverimg:hover,
.hovertext:hover~.hoverimg {
filter: brightness(50%);
}
<div class="wrapper">
<img class="hoverimg" src="https://loremflickr.com/320/240">
<div class="hovertext">HOVER TEXT</div>
</div>
And if you are planning to add event on the text then you can change img and text properties on .wrapper class hover
.wrapper {
position: relative;
text-align: center;
}
.hovertext {
display: none;
color: white;
font-size: 30px;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.wrapper:hover .hovertext {
display: block;
}
.wrapper:hover .hoverimg {
filter: brightness(50%);
}
<div class="wrapper">
<img class="hoverimg" src="https://loremflickr.com/320/240">
<div class="hovertext">HOVER TEXT</div>
</div>

Answer 2

There is no way of selecting the previous element i.e. changing the styling of previous element using CSS as you are trying using sibling selector .hovertext:hover ~ .hoverimg, to make use of sibling selector here you need to make some changes in your html markup as below,
.wrapper {
position: relative;
text-align: center;
}
.hovertext {
display: none;
color: white;
font-size: 30px;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
z-index: 9;
}
.wrapper:hover > .hovertext {
display: block;
}
.hoverimg:hover,
.hovertext:hover ~ .hoverimg {
filter: brightness(50%);
}
<div class="wrapper">
<div class="hovertext">HOVER TEXT</div>
<img class="hoverimg" src="https://loremflickr.com/320/240">
</div>
In the above codes I have changed your HTML markup, thus now .hoverimg is sibling of targeted element i.e. .hovertext, so now every-time when you hover .hovertext or .hoverimg it adds assigned styling.