Почему не получается изменить стиль элемента при наведении на другой элемент?

Question

[sleepy_hungry]

Привет, ребят. Помогите, пожалуйста, спрятать overlay при наведении на link. Opacity не помогает, display:none - тоже, обнуление бэкграунда у оверлея - тоже.
Опыта пока не хватает понять, как это сделать. Буду благодарен за разъяснение и помощь.

Html

<div class="card">
	<div class=card__photo">
		    <div class="card__overlay"></div>
		    <a href="#" class="card__link">Читать дальше</a>
	</div>
</div>

CSS

.card__photo {
	background: url(../img/pic1.jpg) top center no-repeat;
	width: 370px;
	height: 370px;
	display: inline-block;
	position: relative;
}

.card__overlay {
	width: 100%;
	height: 100%;
	background: linear-gradient(1.19deg, #062B31 -15.8%, rgba(6, 43, 49, 0) 99.03%), rgba(0, 181, 255, 0.2);
	position: absolute;
	top: 0;
	left: 0;
	opacity: 1;
}

.card__link {
	font-size: 15px;
	color: #26AFFF;
	display: block;
	position: absolute;
	top: 325px;
	left: 25px;
}

.card__link:hover .card__overlay {
	opacity: 0;
}

Answer 1

[Роман Дворянов]

Чтоб такая конструкция сработала
.card__link:hover .card__overlay

Элемент .card__overlay должен находится внутри .card__link, единственное что могу посоветовать, это переместить оверлей ниже ссылки, в CSS его поднять выше/ниже/ куда нужно

<div class="card">
  <div class=card__photo">
        <a href="#" class="card__link">Читать дальше</a>
        <div class="card__overlay"></div>
  </div>
</div>

И в селекторах указать

.card__link:hover + .card__overlay {
  ...
}

Это означает следующий элемент за тем, на ком сработал ховер