There is an issue with the image gallery in this example where boxes 1 to 9 are stretching downward, as shown in the snippet.
I have attempted to set them with a fixed size using align-content and align-items, but I have not had any success.
If I adjust the browser size, the boxes return to their normal layout, similar to the image link here: https://i.sstatic.net/f3Xjk.png
const menu = document.querySelectorAll('.inner .box');
const cursors = document.querySelectorAll('.cursor')
cursors.forEach( c => {
c.addEventListener('click', () =>{
for(let i = 0; i < menu.length; i++){
if(menu[i].classList.contains('scale')){
if(c.innerText == "<"){
if(i == 0){
menu[0].classList.remove('scale')
menu[menu.length - 1].classList.add('scale')
break
}
menu[i].classList.remove('scale')
menu[i-1].classList.add('scale')
break
}
else if(c.innerText == ">"){
if(i == menu.length - 1){
menu[i].classList.remove('scale')
menu[0].classList.add('scale')
break
}
menu[i].classList.remove('scale')
menu[i+1].classList.add('scale')
break
}
}
}
});
});body{
height:90vh;
background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(0,93,133,1) 0%, rgba(0,181,149,1) 90% );
background-repeat: no-repeat;
animation: GradientAnimated 59s ease infinite;
}
.container{
margin-top: 10vh;
display: flex;
padding:-1px;
width: 100vw;
align-items: center;
justify-content: space-around;
}
.container.inner{
margin-top:0;
width: 50vw;
height: 40vh;
border: 2px solid black;
align-items: center;
justify-content: center;
}
.box{
width: 15vw;
height: 40vh;
color: white;
text-align: center;
font-size: 4vw;
}
.box1{background-color:#f00;}
.box2{background-color:#fa0;flex-grow:1;}
.box3{background-color:#ff0;}
.box4{background-color:#080;}
.box5{background-color:#00f;}
.box6{background-color:#6ae;}
.box7{background-color:#90d;}
.box8{background-color:#408;}
.box.scale:hover{
cursor: pointer;
}
.cursor{
color: #222;
}
.cursor:hover{
cursor: pointer;
animation: shake 1s cubic-bezier(.36,.07,.19,.97) both infinite;
}
.scale{
box-sizing: content-box;
border: 2px solid black;
animation-name: Scale;
animation-timing-function:ease;
animation-duration: 1s;
animation-iteration-count:1;
animation-fill-mode: forwards;
}
@keyframes Scale{
from{transform: scale(1);}
to{transform: scale(1.5);}
}
@keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}
20%, 80% {
transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}
40%, 60% {
transform: translate3d(4px, 0, 0);
}
}
@keyframes GradientAnimated {
0%{background-position:0% 10%}
50%{background-position:100% 91%}
100%{background-position:0% 10%}
}<div class="container">
<div class="box cursor">
<</div>
<div class="container inner">
<div class="box box1 scale">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<div class="box box5">5</div>
<div class="box box6">6</div>
<div class="box box7">7</div>
<div class="box box8">8</div>
</div>
<div class="box cursor">></div>
</div>