css как при hovere на 1 элемент задавать стили нескольким

.card {
  width: 50%;
}

.card__img {
  max-width: 500px;
  width: 100%;
}

.wrapper__img {
  position: relative;
  max-width: 500px;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.card__title {
  color: #fff;
  font-size: 20px;
  position: absolute;
  font-weight: bold;
  bottom: 20%;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.774);
  z-index: 50;
}

.card__title:hover~.card__text {
  display: block;
}

.card__title:hover~body {
  background-color: rgba(0, 0, 0, 0.904);
}

.card__text {
  font-size: 20px;
  color: #fff;
  max-width: 250px;
  position: absolute;
  top: 20%;
  right: 30%;
  font-weight: bold;
  display: none;
}

<div class="cards">
  <div class="wrapper__img">
    <p class="card__title">Lorem, ipsum.</p>
    <img class="card__img" src="img/3.jpg" alt="">
    <p class="card__text">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia mollitia magnam sapiente quisquam numquam perferendis.
    </p>
    <p class="card__descr">
      Lorem ipsum dolor sit amet, consectetur adipisicing.
    </p>
  </div>
</div>