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.