How to hover element and make other element use that effect too?

Question

I want to do some hover-shadow effects on images in my cards and it works fine, but how can i make hover effect stay when i move my mouse to the title? Without that it looks bad :(

By the way is there any way to do that "smart"? i feel like my code is kinda complicated with positions and translateX etc.

.top-galleria-shadow {
    height: 100%;
    background: black;
    opacity: 0.6;
}

.top-galleria-shadow:hover {
    opacity: 0;
    transition: 0.6s;
}

.galleria-section, .most-popular-products-section {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.galleria-section > div {
    width: 285px;
    height: 285px;
}

.galleria-section > div:first-child {
    background: url("https://hips.hearstapps.com/pop.h-cdn.co/assets/15/27/2048x1024/landscape-1435758551-m3.jpg?resize=480:*");
    background-size: cover;
}

.galleria-section > div:nth-child(2) {
    background: url("https://hips.hearstapps.com/pop.h-cdn.co/assets/15/27/2048x1024/landscape-1435758551-m3.jpg?resize=480:*");
    background-size: cover;
}

.galleria-section > div:nth-child(3) {
    background: url("https://hips.hearstapps.com/pop.h-cdn.co/assets/15/27/2048x1024/landscape-1435758551-m3.jpg?resize=480:*");
    background-size: cover;
}

.galleria-section > div:last-child {
    background: url("https://hips.hearstapps.com/pop.h-cdn.co/assets/15/27/2048x1024/landscape-1435758551-m3.jpg?resize=480:*");
    background-size: cover;
}

.galleria-section p {
    color: #FFFFFF;
    font-weight: bold;
    font-size: 20px;
    z-index: 2;
    bottom: 60px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

<div class="top-galleria">
        <h3 class="block-title-h3">Lorem</h3>
        <p>Lorem</p>
        <div class="galleria-section">
            <div>
                <div class="top-galleria-shadow"></div>
                <p>Title1</p>
            </div>
            <div>
                <div class="top-galleria-shadow"></div>
                <p>Title2</p>
            </div>
            <div>
                <div class="top-galleria-shadow"></div>
                <p>Title3</p>
            </div>
            <div>
                <div class="top-galleria-shadow"></div>
                <p>Title4</p>
            </div>
        </div>

Answer 1

You can use a sibling selector in this case, like

.top-galleria-shadow + p {
  pointer-events: none;
}

and use pointer-events: none; in there to not let it react to the cursor, but let hovers and clicks "go through it" to the element behind it:

.top-galleria-shadow {
    height: 100%;
    background: black;
    opacity: 0.6;
}

.top-galleria-shadow:hover {
    opacity: 0;
    transition: 0.6s;
}
.top-galleria-shadow + p {
  pointer-events: none;
}

.galleria-section, .most-popular-products-section {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.galleria-section > div {
    width: 285px;
    height: 285px;
}

.galleria-section > div:first-child {
    background: url("https://hips.hearstapps.com/pop.h-cdn.co/assets/15/27/2048x1024/landscape-1435758551-m3.jpg?resize=480:*");
    background-size: cover;
}

.galleria-section > div:nth-child(2) {
    background: url("https://hips.hearstapps.com/pop.h-cdn.co/assets/15/27/2048x1024/landscape-1435758551-m3.jpg?resize=480:*");
    background-size: cover;
}

.galleria-section > div:nth-child(3) {
    background: url("https://hips.hearstapps.com/pop.h-cdn.co/assets/15/27/2048x1024/landscape-1435758551-m3.jpg?resize=480:*");
    background-size: cover;
}

.galleria-section > div:last-child {
    background: url("https://hips.hearstapps.com/pop.h-cdn.co/assets/15/27/2048x1024/landscape-1435758551-m3.jpg?resize=480:*");
    background-size: cover;
}

.galleria-section p {
    color: #FFFFFF;
    font-weight: bold;
    font-size: 20px;
    z-index: 2;
    bottom: 60px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

<div class="top-galleria">
        <h3 class="block-title-h3">Lorem</h3>
        <p>Lorem</p>
        <div class="galleria-section">
            <div>
                <div class="top-galleria-shadow"></div>
                <p>Title1</p>
            </div>
            <div>
                <div class="top-galleria-shadow"></div>
                <p>Title2</p>
            </div>
            <div>
                <div class="top-galleria-shadow"></div>
                <p>Title3</p>
            </div>
            <div>
                <div class="top-galleria-shadow"></div>
                <p>Title4</p>
            </div>
        </div>