• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Css hover mi nie działa

VPS Starter Arubacloud
+1 głos
245 wizyt
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ź

0 głosów
odpowiedź 23 listopada 2022 przez VBService Ekspert (251,210 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 smiley

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

 

komentarz 25 listopada 2022 przez MacieKap Bywalec (2,400 p.)
ale, ja chciałbym aby on się poszerzał, a inne zwężały.
komentarz 26 listopada 2022 przez VBService Ekspert (251,210 p.)

Sprawdź ten: CSS-accordion-flex

Podobne pytania

0 głosów
1 odpowiedź 296 wizyt
pytanie zadane 21 listopada 2022 w HTML i CSS przez MacieKap Bywalec (2,400 p.)
0 głosów
1 odpowiedź 167 wizyt
pytanie zadane 6 lutego 2020 w HTML i CSS przez Debinski93 Nowicjusz (120 p.)
+2 głosów
3 odpowiedzi 454 wizyt
pytanie zadane 25 listopada 2022 w HTML i CSS przez MacieKap Bywalec (2,400 p.)

92,452 zapytań

141,262 odpowiedzi

319,079 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...