:hover na przeglądarce chrome działa jak :focus, tekst nie wyświetla się wcale

Cześć! Chciałabym po najechaniu na obraz osiągnąć efekt jego "zniknięcia" (dlatego zmiana opacity, który działa przyciemniająco na biały) oraz pojawienia się tekstu ze znacznika <p>, który jest początkowo niewyświetlany (display:none). Niestety :hovern a google chrome działa jak :focus (tło zmienia się na białe dopiero po kliknięciu) - na innych przeglądarkach działa prawidłowo. Natomiast tekst nie chce mi wyświetlać się wcale ani po najechaniu, ani po kliknięciu w żadnej przeglądarce. Proszę o pomoc i dołączam pliki z kodem oraz reset.css.

HTML:

 <div class="offer_columns_cakes">
     <div class="opacity"> 
        <p>
           Zapraszamy do zamawiania ciast na wszelkiego rodzaju okazje od urodzin po wesela.
        </p>
     </div>
     <h1>Torty</h1>
 </div>

CSS

.offer_columns_pies {
    background-image: url(../img/bg/ciastko4.jpg);
    background-repeat: no-repeat;
    background-size: 155%;
    background-position-x: -137px;
}

.opacity {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 320px;
    height: 320px;
    background-color: rgba(0, 0, 0, 0.4);
}

p {
    display: none;
    position: absolute;
    color: #763e35;
    z-index: 2;
    transition: all 2s;
}

.opacity:hover {
    background-color: white;
}

.opacity:hover + p {
    display: block;
}

Z ogólnych parametrów w CSS mam jeszcze:

*, *:after, *:before {
    box-sizing: border-box;
}

body {
    font-family: 'Nunito', sans-serif;
    margin: 0 auto;
    max-width: 550px;
}

html.txt
reset.css
css.txt

(Nie podałaś pliku ‘css’, jest taki sam jak ‘html’.)
U mnie działa, przykład:
https://codepen.io/overcq/pen/jOZyZNz

overcq napisał(a):

(Nie podałaś pliku ‘css’, jest taki sam jak ‘html’.)
U mnie działa, przykład:
https://codepen.io/overcq/pen/jOZyZNz

css.txt

Co do niepojawiającego się tekstu: używasz nieodpowiedniego do struktury ‘html’ selektora (https://developer.mozilla.org/pl/docs/Web/CSS/CSS_Selectors). Poprawiłem w podanym wcześniej ‘codepen’.
Natomiast u mnie na Chromium wersja 101 działa “hover”.

overcq napisał(a):

Co do niepojawiającego się tekstu: używasz nieodpowiedniego do struktury ‘html’ selektora (https://developer.mozilla.org/pl/docs/Web/CSS/CSS_Selectors). Poprawiłem w podanym wcześniej ‘codepen’.
Natomiast u mnie na Chromium wersja 101 działa “hover”.

Wielkie dzięki! Co do niedziałającego hovera to okazało się, że hover nie działał tylko na devtoolsach, a normalnie w przeglądarce jest wszystko ok także dwa problemy rozwiązane.