Image Pyramid Gallery
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
background: #f0f0f0;
font-family: Arial, sans-serif;
padding: 2rem;
display: flex;
justify-content: center;
align-items: center;
}
.pyramid {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.row {
display: flex;
gap: 1rem;
justify-content: center;
}
.image-container {
position: relative;
width: 150px;
height: 150px;
cursor: pointer;
transition: transform 0.3s ease;
}
.image-container:hover {
transform: scale(1.05);
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.image-title {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,0.7);
color: white;
padding: 0.5rem;
text-align: center;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
font-size: 0.9rem;
}
/* Modal styles */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
z-index: 1000;
justify-content: center;
align-items: center;
padding: 2rem;
}
.modal-content {
background: white;
padding: 2rem;
border-radius: 12px;
max-width: 800px;
width: 90%;
position: relative;
display: flex;
gap: 2rem;
flex-wrap: wrap;
}
.modal-image {
flex: 1 1 300px;
min-width: 300px;
}
.modal-image img {
width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.modal-info {
flex: 1 1 300px;
}
.modal-title {
font-size: 1.5rem;
margin-bottom: 1rem;
color: #333;
}
.modal-description {
line-height: 1.6;
color: #666;
}
.close-button {
position: absolute;
top: 1rem;
right: 1rem;
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: #333;
padding: 0.5rem;
}
.close-button:hover {
color: #000;
}
@media (max-width: 1024px) {
.image-container {
width: 120px;
height: 120px;
}
}
@media (max-width: 768px) {
.image-container {
width: 100px;
height: 100px;
}
.image-title {
font-size: 0.8rem;
}
}
Peak
Mountain Lake
Forest View
Sunset Valley
River Bend
Ancient Trees
Desert Oasis
Coastal Cliffs
Hidden Cave
Meadow Flowers
Arctic Lights
Tropical Beach
Canyon View
Mountain Stream
Autumn Forest
const imageData = {
1: {
title: "Peak",
description: "A majestic mountain peak reaching into the clouds, showing nature's grandeur at its finest."
},
2: {
title: "Mountain Lake",
description: "Crystal clear waters reflect the surrounding mountains like a mirror, creating a perfect mountain paradise."
},
3: {
title: "Forest View",
description: "Ancient trees stretch as far as the eye can see, creating a dense canopy of green life."
},
4: {
title: "Sunset Valley",
description: "The valley glows with golden light as the sun sets behind distant mountains."
},
5: {
title: "River Bend",
description: "A peaceful river curves through the landscape, carved by centuries of flowing water."
},
6: {
title: "Ancient Trees",
description: "Towering redwoods that have stood for centuries, testament to nature's endurance."
},
7: {
title: "Desert Oasis",
description: "A surprising haven of life in the midst of an arid landscape."
},
8: {
title: "Coastal Cliffs",
description: "Dramatic cliffs rise from the ocean, shaped by countless waves and storms."
},
9: {
title: "Hidden Cave",
description: "A mysterious cave entrance hints at underground wonders waiting to be explored."
},
10: {
title: "Meadow Flowers",
description: "A colorful carpet of wildflowers stretches across an alpine meadow."
},
11: {
title: "Arctic Lights",
description: "The northern lights dance across the polar sky in a spectacular light show."
},
12: {
title: "Tropical Beach",
description: "White sands and turquoise waters create a perfect tropical paradise."
},
13: {
title: "Canyon View",
description: "Layer upon layer of colored rock tells the story of millions of years."
},
14: {
title: "Mountain Stream",
description: "Clear water tumbles over rocks, beginning its journey from mountain to sea."
},
15: {
title: "Autumn Forest",
description: "Trees display their fall colors in a spectacular show of reds and golds."
}
};
const modal = document.getElementById('imageModal');
const modalImage = document.getElementById('modalImage');
const modalTitle = document.getElementById('modalTitle');
const modalDescription = document.getElementById('modalDescription');
const closeButton = document.querySelector('.close-button');
// Add click event listeners to all image containers
document.querySelectorAll('.image-container').forEach(container => {
container.addEventListener('click', () => {
const id = container.getAttribute('data-id');
const data = imageData[id];
const imgSrc = container.querySelector('img').src;
modalImage.src = imgSrc;
modalImage.alt = data.title;
modalTitle.textContent = data.title;
modalDescription.textContent = data.description;
modal.style.display = 'flex';
});
});
// Close modal when clicking the close button
closeButton.addEventListener('click', () => {
modal.style.display = 'none';
});
// Close modal when clicking outside the content
modal.addEventListener('click', (e) => {
if (e.target === modal) {
modal.style.display = 'none';
}
});
// Close modal with Escape key
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
modal.style.display = 'none';
}
});
