Witam,
jak zrobić, żeby .photo-box poszerzał się, a sąsiadujące z nim zwężały?
Chciałbym uzyskać efekt jak na filmie (https://www.youtube.com/watch?v=IoCzObAXHm8&list=WL&index=10&t=357s).
<!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>
<div class="nav">
<ul class="menu">
<li class="button">Lis Polarny</li>
<li class="button">Lis Rudy</li>
<li class="button">Lis Pustynny</li>
</ul>
</div>
<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>
<script src="script.js"></script>
</body>
</html>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}
body{
color: white;
overflow: hidden;
position: relative;
padding: 0;
margin: 0;
}
.logo{
background-color: rgba(0, 0, 0, 0.25);
width: 100vw;
height: 56px;
text-align: center;
font-size: 45px;
font-weight: 500;
position: absolute;
z-index: 9999;
}
.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;
transition: background-color .3s;
}
.burger-line::before, .burger-line::after{
content: '';
display: inline-block;
position: absolute;
transform: translateY(-50%);
background-color: white;
width: 100%;
height: 3px;
left: 0;
transition: transform .3s linear;
}
.burger-line::before{
top: -15px;
}
.burger-line::after{
top: 18px;
}
.burger-active .burger-line{
background-color: transparent;
}
.burger-active .burger-line::before{
transform: translateY(15px) rotate(45deg);
}
.burger-active .burger-line::after{
transform: translateY(-18px) rotate(-45deg);
}
.nav{
position: absolute;
background-color: rgba(0, 0, 0, 0.15);
top: 56px;
width: 100vw;
height: 47px;
left: 0;
z-index: 1;
transform: translateX(-100vw);
transition: opacity .3s ease-in-out;
opacity: 0;
z-index: 9999;
}
.nav-active{
opacity: 1;
transform: translateX(0);
}
.menu{
display: flex;
list-style-type: none;
height: 47px;
}
.button{
font-size: 30px;
font-weight: 500;
flex-grow: 1;
padding-top: 5px;
text-align: center;
height: 47px;
}
.button:not(:last-child){
border-right: 3px solid white;
}
.photos{
width: 100vw;
height: 100vh;
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: transform .3s ease-in-out;
text-transform: uppercase;
text-align: center;
}
.photo-box:hover{
transform: scale(1.2);
z-index: 9;
}
.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;
right: 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);
}
Z góry dziękuję za wszystkie odpowiedzi
