Css hover mi nie działa

pytanie zadane 23 listopada 2022 w HTML i CSS przez MacieKap Bywalec (2,400 p.)

Witam,

nie działa mi .photo-box:hover .

Jest w stanie ktoś pomóc?

@font-face{
    font-family: Montserrat-extra-light;
    src: url(/fonts/Montserrat-ExtraLight.ttf);
}
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}
body{
    color: white;
    overflow: hidden;
    background-color: #2b2b2b;
}
.logo{
    background-color: #2b2b2b;
    position: relative;
    width: 100vw;
    height: 56px;
    text-align: center;
    font-size: 45px;
    font-weight: 600;
}
.burger{
    position: absolute;
    left: 10px;
    top: 7px;
    background-color: transparent;
    border: transparent;
    display: inline-block;
    cursor: pointer;
}
.burger-box{
    width: 62px;
    height: 38px;
    position: relative;
    display: inline-block;
}
.burger-line{
    display: inline-block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: white;
    width: 100%;
    height: 3px;
    left: 0;
}
.burger-line::before, .burger-line::after{
    content: '';
    display: inline-block;
    position: absolute;
    transform: translateY(-50%);
    background-color: white;
    width: 100%;
    height: 3px;
    left: 0;
}
.burger-line::before{
    top: -15px;
}
.burger-line::after{
    top: 18px;
}
.photos{
    width: 100vw;
    height: calc(100vh - 56px);
    display: flex;
    padding: 0;
    margin: 0;
}
.photo-box{
    background-position: center;
    background-size: cover;
    font-weight: 300;
    font-size: 20px;
    flex-grow: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    transition: flex-grow .3s ease-in-out;
    text-transform: uppercase;
}
.photo-box:hover{
    flex-grow: 3;
}
.photo-box p{
    z-index: 1;
}
.photo-box p::first-line{
    font-size: 22px;
}
.photo-box::before{
    content: '';
    position: absolute;
    background-color: rgba(0, 0, 0, 0.25);
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
.lis-rudy{
    background-image: url(img/rudy/lis1.jpg);
}
.lis-pustynny{
    background-image: url(img/fenek/fenek1.jpg);
}
.lis-polarny{
    background-image: url(img/polarny/polarny1.webp);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Foxes</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;600&display=swap" rel="stylesheet">
</head>
<body>
    <div class="logo">
        Foxes
        <button class="burger"><span class="burger-box">
            <span class="burger-line"></span>
        </span></button>
        <div class="photos">
            <div class="photo-box lis-polarny">
                <p>
                    Lis Polarny
                    <br />
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris faucibus sollicitudin arcu ut ullamcorper. Etiam maximus tristique dictum. Nullam in ligula venenatis, rhoncus ex id.</p>
            </div>
            <div class="photo-box lis-rudy">
                <p>
                    Lis Rudy
                    <br />
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris faucibus sollicitudin arcu ut ullamcorper. Etiam maximus tristique dictum. Nullam in ligula venenatis, rhoncus ex id.</p>
            </div>
            <div class="photo-box lis-pustynny">
                <p>
                    Lis Pustynny
                    <br />
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris faucibus sollicitudin arcu ut ullamcorper. Etiam maximus tristique dictum. Nullam in ligula venenatis, rhoncus ex id.</p>
            </div>
        </div>
    </div>
</body>
</html>

Z góry dziękuję za wszystkie odpowiedzi.

1 odpowiedź

odpowiedź 23 listopada 2022 przez VBService Ekspert (252,740 p.)
edycja 24 listopada 2022 przez VBService

Dodaj do .photo-box

.photo-box{
    background-position: center;
    background-size: cover;
    font-weight: 300;
    font-size: 20px;
    flex-grow: 1;
    flex-basis: 0;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    transition: flex-grow .3s ease-in-out;
    text-transform: uppercase;
}

a może tak

[ on-line ]

.photo-box:hover{
  background-color: rgba(0,0,0,0.9);
  z-index: 9999;
  transform: scale(1.5);
}
.photo-box:first-child:hover{
  transform: translatex(calc(5vw * 1.5)) scale(1.5);
}
.photo-box:last-child:hover{
  transform: translatex(calc(5vw * -1.5)) scale(1.5);
}