Нужно затемнить весь блок (который является ссылкой) при наведении на него курсора, оставив текст белым. Не могу никак сообразить. Пробовал через z-index, не выходит. Как видно, вместе со всем остальным затемняется и текст. Буду рад советам
.page{
background-color: #2A2C2F;
color: white;
width: 100vw;
max-width: 1280px;
min-width: 320px;
font-family: "Inter", "Arial", sans-serif;
align-items: center;
box-sizing: border-box;
margin: 0 auto;
}
.cover {
width: 100%;
height: auto;
max-width: 1280px;
padding-bottom: 64px;
box-sizing: border-box;
}
@media all and (min-width: 1280px) {
.cover {
padding: 0 calc(50% - 1184px/2);
}
}
.cover__link {
color: white;
text-decoration: none;
}
.cover__link:hover {
color: #2A2C2F;
opacity: 0.8;
}
.cover__background {
position: relative;
width: 100%;
max-width: 1280px;
background-image: url(http://fonday.ru/images/tmp/11/8/original/11842DGVetTQvladEhXKABJ.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.cover__overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: #2A2C2F;
opacity: 0.3;
}
.cover__title {
position: relative;
max-width: 560px;
margin: 0 auto;
font-style: normal;
font-weight: 900;
text-align: center;
}
.cover__subtitle{
max-width: 360px;
margin: 0 auto;
font-style: normal;
font-weight: normal;
text-align: center;
margin-top: 32px;
}
<section class="cover">
<a class="cover__link" href="#" target="__blank">
<div class="cover__background">
<h2 class=cover__title>Lorem ipsum</h2>
<p class="cover__subtitle">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="cover__overlay"></div>
</div>
</a>
</section>