I am currently in the process of building a swim image gallery inspired by the Flex Panel Gallery project from Javascript30 (Repo Link). Upon previewing the site in a browser, I encountered an issue where the images extend beyond the frame, leaving only the background of the five flex columns visible on the page.
I'm puzzled as to why the images are being pushed downward out of view in the browser and why the text (which is not organized in column format) only appears after clicking within the columns.
const panels = document.querySelectorAll('.panel');
function toggleOpen() {
console.log('Hello');
this.classList.toggle('open');
}
function toggleActive(e) {
console.log(e.propertyName);
if (e.propertyName.includes('flex')) {
this.classList.toggle('open-active');
}
}
panels.forEach(panel => panel.addEventListener('click', toggleOpen));
panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));body {
box-sizing: border-box;
background: lightblue;
font-family: "Source Sans Pro", sans-serif;
font-size: 20px;
font-weight: 200;
margin: 0;
box-sizing: inherit;
}
.image-panels {
min-height: 100vh;
overflow: hidden;
display: flex;
}
.panel {
display: flex;
background: #6B0F9C;
box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.1);
color: white;
text-align: center;
align-items: center;
transition:
font-size 0.7s cubic-bezier(0.51, -0.19, 0.7, -0.11),
flex 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11),
background 0.2s;
font-size: 20px;
background-size: cover;
background-position: center;
flex: 1;
justify-content: center;
flex-direction: column;
}
#first-panel {
background-image: url(https://picsum.photos/id/10/2500/1667);
}
#second-panel {
background-image: url(https://picsum.photos/id/10/2500/1667);
}
#third-panel {
background-image: url(https://picsum.photos/id/10/2500/1667);
}
#fourth-panel {
background-image: url(https://picsum.photos/id/10/2500/1667);
}
#fifth-panel {
background-image: url(https://picsum.photos/id/10/2500/1667);
}
.panel > * {
display: flex;
margin: 0;
width: 100%;
transition: transform 0.5s;
flex: 1 0 auto;
justify-content: center;
align-items: center;
}
.panel > *:first-child {
transform: translateY(-100%);
}
.panel.open-active > *:first-child {
transform: translateY(0);
}
.panel > *:last-child {
transform: translateY(100%);
}
.panel.open-active > *:last-child {
transform: translateY(0);
}
.panel div p {
text-shadow: 0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
font-size: 2em;
}
.panel div p:nth-child(2) {
font-size: 4em;
}
.panel.open {
flex: 5;
font-size: 40px;
}<html lang="en">
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<title>Swim Club Image Gallery</title>
</head>
<body>
<div class="image-panels">
<div class="panel">
<div id="first-panel">
<p>Join</p>
<p>This</p>
<p>Quarter!</p>
</div>
</div>
<div class="panel">
<div id="second-panel">
<p>Swimming</p>
<p>Is</p>
<p>Fun!</p>
</div>
</div>
<div class="panel">
<div id="third-panel">
<p>Every</p>
<p>Husky</p>
<p>Is Welcome!</p>
</div>
</div>
<div class="panel">
<div id="fourth-panel">
<p>Recreational</p>
<p>Swim</p>
<p>Atmosphere!</p>
</div>
</div>
<div class="panel">
<div id="fifth-panel">
<p>Best</p>
<p>Club</p>
<p>To Stay Fit!</p>
</div>
</div>
</div>
<script src="index.js">
</script>
</body>
</html>