Jag försöker förstå hur man får två klasser att sväva samtidigt

.ellenon {
  box-sizing: border-box;
  width: 350px;
  height:350px;
  background-image: url("https://wallpapercave.com/wp/wp5609581.jpg");
  filter: grayscale(100%);
  color:white;
  transition: 0.5s;
}

.ellenon :where(h1, p) {
  line-height:1.5em;
  letter-spacing: 1.1px;
  padding-right: 10px;
  padding-left: 10px;
  transition: 0.5s;
}

.ellenon:hover {
  filter: grayscale(0%);
}

.ellenon h1:hover {
  transform: translate(0px, -20px);
  color:transparent;
  transition: 0.5s;
}

.ellenon p:hover {
   transform: translate(0px, 20px);
  color:transparent;
  transition: 0.5s;
}

.ellenon2:hover {
  transform: translate(0px, -20px);
  color:transparent;
}

<div class="ellenon"><a href="https://codepen.io/" class="ellenon2"><h1>What is Lorem Ipsum?</h1> <p>
Lorem Ipsum is simply dummy text</p></a></div>

Hej där, jag försöker skapa en enkel CSS-animation som du kan se i min kod. Jag kan dock inte förstå hur man kör båda hovringarna när användaren svävar över den externa div. Är detta möjligt med rå CSS eller JS behövs?

Tack

Svar

Du kan välja .outer:hover och .outer:hover .inner så båda kommer att ändras när den yttre svävas

.outer{
  width:100px;
  height:100px;
  background-color:orange;
}
.inner{
  width:50px;
  height:50px;
  background-color:blue;
}
.outer:hover{
  background-color:green;
}
.outer:hover .inner{
  background-color:red;
}

<div class="outer">
  <div class="inner"></div>
</div>