JSFiddle - React, Tailwind, and code Playground

HTML

<div style="background:red;position:relative;">
  <h1>Thing</h1>
  <div id="hoverable" style="background:green;">
    <h1>Thing</h1>
    <h1>Thing</h1>
    <h1 id="darkens" style="background:blue;">
      Text
      <img src="https://forums.phpfreaks.com/uploads/monthly_2022_04/logo-light.png.3076db8e31835fbfe0d6cc21f71f23c0.png">
      Text
    </h1>
    <h1>Thing</h1>
    <h1>Thing</h1>
  </div>
  <h1>Thing</h1>
</div>

CSS

* { margin: 0; padding: 0; }
div div { margin: 25px }
h1 { padding: 25px}

#hoverable:hover #darkens {
  filter: brightness(50%);
}