• 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

Aruba Cloud PRO i VPS, Openstack, VMWare, MS Hyper-V
+1 głos
93 wizyt
pytanie zadane 23 listopada w HTML i CSS przez MacieKap Obywatel (1,950 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 przez VBService Ekspert (204,430 p.)
edycja 24 listopada 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 przez MacieKap Obywatel (1,950 p.)
ale, ja chciałbym aby on się poszerzał, a inne zwężały.
komentarz 26 listopada przez VBService Ekspert (204,430 p.)

Sprawdź ten: CSS-accordion-flex

Podobne pytania

0 głosów
1 odpowiedź 62 wizyt
pytanie zadane 21 listopada w HTML i CSS przez MacieKap Obywatel (1,950 p.)
0 głosów
1 odpowiedź 99 wizyt
pytanie zadane 6 lutego 2020 w HTML i CSS przez Debinski93 Nowicjusz (120 p.)
+2 głosów
3 odpowiedzi 89 wizyt
pytanie zadane 25 listopada w HTML i CSS przez MacieKap Obywatel (1,950 p.)

89,760 zapytań

138,364 odpowiedzi

309,422 komentarzy

59,673 pasjonatów

Advent of Code 2022

Top 15 użytkowników

  1. 908p. - Argeento
  2. 877p. - nidomika
  3. 851p. - Michal Drewniak
  4. 848p. - Mikbac
  5. 846p. - rucin93
  6. 838p. - Łukasz Eckert
  7. 835p. - ssynowiec
  8. 822p. - TheLukaszNs
  9. 794p. - JMazurkiewicz
  10. 787p. - Hubert Chęciński
  11. 786p. - adrian17
  12. 775p. - Jarosław Roszyk
  13. 760p. - Mawrok
  14. 756p. - overcq
  15. 752p. - Vinox
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

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

Sklep oferujący ćwiczenia JavaScript, PHP, rozmowy rekrutacyjne dla programistów i inne materiały

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...