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;
}