рони,
 
<a href="#" class="works__row-image">
        <div class="works__hover">
            <div class="works__hover-text"></div>
            <div class="works__hover-text"></div>
        </div>
        <img src="../src/IMG/worksImages/image_1.jpg" class="works__image">
    </a>
.works__row-image {
display: block;
    transition: 0.3s;
    position: relative;
    margin: 15px;
}
.works__hover {
 transition: 0.3s;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--color_8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
}
и вот как делал я
const children = document.querySelector(".works__hover")
    children.addEventListener("click", () => {
      children.parentNode.classList.toggle("active")
    });
По картинке видно что класс добовляется 
works__hover, а мне нужно  на 
works__row-image ,когда я кликаю по элементу 
works__hover