CSS hover yönetimi yardım

Arkadaşlar merhaba, iyi forumlar

Bir tasarımda hover yönetimi konusunda bir noktada takıldım daha önceden hiç yaptığım bir uygulama değil düşündüğüm şey olur mu olmaz mı bilmiyorum ama aşağıdaki görselde ki gibi bir divim var resim ve h etiketi ayrı bir class ta button bölümü ise bu class ın dışarısında her iki bölümde de farklı hover özelliği mevcut sadece button clasına gelince üst taraftaki classın hover bölümünü de çalıştırsın istiyorum böyle birşey mümkün müdür bilgisi olan arkadaşlar yardımcı olabilir mi ?

Detaylı İnceleye geldiği zaman div'in hover'ı mı tetiklensin istiyorsunuz ben çok kavrayamadım

Evet tam olarak o şekilde Detaylı İncele yazısına gelince background tema rengini alıyor üst kısımda ki resim ve h etiketine gelincede aynı şekilde ama Detaylı İnceleye gelince üst kısımda renk alsın istiyorum. Üst kısma gelince mouse ile detaylı incele renk almasın istiyorum.

buttonun classını yazıp :hover yazıp devamınada etki edilmesi istediğiniz özelliğin classını yazınız hocer olduğunda o div çalısır

şöyle
.button:hover .container {}

Onu şekilde " .services .page-content .service button:hover .service-title a " denedim fakat sonuç alamadım. Bu şekilde button kısmının hover özelliğinide öldürüyor.

kodu görmeden classlarınızı kontrol edemem kodu iletin classları ileteyim

.services .page-content .service-title a {
    -webkit-filter: grayscale(100%);
      filter: grayscale(100%);
      color: var(--text-color);
      transition: 0.7s;
}

.services .page-content .service-title a:hover {
    -webkit-filter: none;
      filter: none;
      color: var(--main-color);
      transition: 0.7s;
}

.services .page-content .service button {
    color: var(--text-color);
    background: no-repeat;
    border: 1px solid var(--text-color);
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 30px;
    padding-right: 30px;
    margin-top: 20px;
    margin-bottom: 100px;
    transition: 0.7s;
}

.services .page-content .service button:hover {
    color: var(--text-white);
    background-color: var(--main-color);
    transition: 0.7s;
    border: 1px solid var(--main-color);
}

resim ve h etiketi service-title class ının içerisinde button ise class dışında

hocam css kodunuzu ne yapacağım html iletin

<div class="col-lg-4 col-md-6 col-sm-12 service">
                    <div class="service-title">
                        <a href="sosyal-medya-yonetimi">
                            <img src="images/services/sosyal-medya-yonetimi.png">
                            <h2>Sosyal Medya Yönetimi</h2>
                        </a>
                    </div>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua.</p>

                    <a href="sosyal-medya-yonetimi"><button>Detaylı İncele</button></a>
                </div>