School Gallery

Our School Life in Frames

Explore recent events, academic achievements, and daily activities at our campus.

Science Laboratory Class Science Lab

Chemistry Practical

Grade 11 students exploring chemical reactions.

Students in Classroom Academics

Interactive Learning

Modern classrooms equipped with digital smart boards.

School Football Match Sports

Annual Football Tournament

Celebrating teamwork, spirit, and athleticism.

Computer Lab Technology

Coding Bootcamp

Students practicing C Programming and logic building.

School Art Exhibition Arts

Creative Arts Exhibition

Showcasing fine arts and crafts designed by our students.

Graduation Ceremony Events

Graduation Day

Honoring our seniors as they step out into the world.

/* Base Layout Setup */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: #f8f9fa; color: #333; padding: 40px 20px; } /* Gallery Section Wrapper */ .gallery-section { max-width: 1200px; margin: 0 auto; } .gallery-header { text-align: center; margin-bottom: 40px; } .gallery-header h2 { font-size: 2.5rem; color: #1a365d; /* Classic corporate/school dark blue */ margin-bottom: 10px; } .gallery-header p { color: #666; font-size: 1.1rem; } /* Modern CSS Grid Layout */ .gallery-grid { display: grid; /* auto-fit automatically calculates columns based on width */ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; } /* Gallery Card Structure */ .gallery-item { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease; } /* Hover elevation effect on the card itself */ .gallery-item:hover { transform: translateY(-5px); } .image-box { position: relative; width: 100%; height: 250px; /* Uniform height across items */ overflow: hidden; } .image-box img { width: 100%; height: 100%; object-fit: cover; /* Ensures image aspect ratio behaves beautifully */ transition: transform 0.5s ease; } /* Category Badge Positioning */ .category-badge { position: absolute; top: 15px; left: 15px; background-color: #1a365d; color: #fff; padding: 6px 14px; font-size: 0.8rem; font-weight: 600; border-radius: 20px; z-index: 2; box-shadow: 0 2px 8px rgba(0,0,0,0.2); } /* Hover Overlay Styles */ .image-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(26, 54, 93, 0.9), rgba(0, 0, 0, 0.2)); display: flex; align-items: flex-end; padding: 20px; opacity: 0; /* Hidden by default */ transition: opacity 0.4s ease; z-index: 1; } .overlay-text { color: #fff; transform: translateY(20px); /* Slid down out of frame initially */ transition: transform 0.4s ease; } .overlay-text h3 { font-size: 1.25rem; margin-bottom: 5px; font-weight: 600; } .overlay-text p { font-size: 0.9rem; opacity: 0.9; line-height: 1.4; } /* --- THE HOVER TRICK --- */ /* When hovering over the image box, trigger these 3 shifts simultaneously */ .image-box:hover img { transform: scale(1.1); /* Zoom image slightly */ } .image-box:hover .image-overlay { opacity: 1; /* Fade-in background gradient */ } .image-box:hover .overlay-text { transform: translateY(0); /* Slide text smoothly upwards into view */ }