media

Masonry Image Gallery

Pinterest-style responsive image grid with lightbox.

gallery masonry images lightbox | GPT 5.3 Ultra

Prompt 

# Role
You are a Senior Media/Graphics Engineer specializing in responsive image layouts, performance optimization, and interactive media components.

# Objective
Create a Pinterest-style masonry image gallery with a CSS-only layout, hover overlays, and a full-featured lightbox — all responsive and optimized for performance.

# Instructions
1. Build the masonry grid layout using CSS columns:
   - Use `columns: 4` with `break-inside: avoid` on image containers
   - Each image wrapped in a container with `border-radius` and subtle `box-shadow`
   - Consistent gap between images using `margin-bottom`
2. Add hover interactions on each image:
   - Slight zoom effect (`transform: scale(1.03)`) with smooth transition
   - Dark overlay fading in with the image title text
   - Title displayed at the bottom of the image over the overlay
3. Implement a lightbox on image click:
   - Full-screen dark overlay (`rgba(0, 0, 0, 0.9)`)
   - Centered full-size image with max dimensions respecting viewport
   - Close button (×) in the top-right corner
   - Previous/Next arrow buttons on left and right sides
   - Keyboard support: Escape to close, arrow keys to navigate
4. Responsive column breakpoints:
   - Desktop (>1024px): 4 columns
   - Tablet (640px–1024px): 2 columns
   - Mobile (<640px): 1 column
5. Performance optimizations:
   - Add `loading="lazy"` on all images
   - Use `alt` text on every image for accessibility

# Constraints
- CSS columns for masonry layout — no JavaScript layout libraries
- Vanilla JavaScript only for lightbox interaction
- No external dependencies or frameworks
- Images must include meaningful `alt` attributes
- Lightbox must trap focus and be keyboard-navigable
- Use placeholder images from a realistic dimension set (varying heights)

# Output Format
- Single HTML file with embedded `<style>` and `<script>` blocks
- Include 8–12 placeholder images with varying aspect ratios
- Well-commented code with sections for layout, hover effects, and lightbox

Notes

Prompt

Role

You are a Senior Media/Graphics Engineer specializing in responsive image layouts, performance optimization, and interactive media components.

Objective

Create a Pinterest-style masonry image gallery with a CSS-only layout, hover overlays, and a full-featured lightbox — all responsive and optimized for performance.

Instructions

  1. Build the masonry grid layout using CSS columns:
    • Use columns: 4 with break-inside: avoid on image containers
    • Each image wrapped in a container with border-radius and subtle box-shadow
    • Consistent gap between images using margin-bottom
  2. Add hover interactions on each image:
    • Slight zoom effect (transform: scale(1.03)) with smooth transition
    • Dark overlay fading in with the image title text
    • Title displayed at the bottom of the image over the overlay
  3. Implement a lightbox on image click:
    • Full-screen dark overlay (rgba(0, 0, 0, 0.9))
    • Centered full-size image with max dimensions respecting viewport
    • Close button (×) in the top-right corner
    • Previous/Next arrow buttons on left and right sides
    • Keyboard support: Escape to close, arrow keys to navigate
  4. Responsive column breakpoints:
    • Desktop (>1024px): 4 columns
    • Tablet (640px–1024px): 2 columns
    • Mobile (<640px): 1 column
  5. Performance optimizations:
    • Add loading="lazy" on all images
    • Use alt text on every image for accessibility

Constraints

  • CSS columns for masonry layout — no JavaScript layout libraries
  • Vanilla JavaScript only for lightbox interaction
  • No external dependencies or frameworks
  • Images must include meaningful alt attributes
  • Lightbox must trap focus and be keyboard-navigable
  • Use placeholder images from a realistic dimension set (varying heights)

Output Format

  • Single HTML file with embedded <style> and <script> blocks
  • Include 8–12 placeholder images with varying aspect ratios
  • Well-commented code with sections for layout, hover effects, and lightbox

Notes

  • Use columns: 4 with break-inside: avoid for the masonry layout — simplest CSS-only approach.
  • Always use loading="lazy" on images for performance.
  • Test lightbox keyboard navigation (Escape, Left/Right arrows) for accessibility.

Related Prompts

View prompt details

Custom Video Player

Styled HTML5 video player with custom controls.

# Role You are a Senior Media/Graphics Engineer specializing in custom media players, HTML5 Video API, and interactive media controls. # Objective Design a custom HTML5 video player with styled controls including play/pause, seek bar, volume, time display, and fullscreen — with auto-hiding controls and a polished dark-mode design. # Instructions 1. Build the video container: - Rounded container with subtle border and overflow hidden - Video element filling the container width - Hide native browser controls (override with custom UI) 2. Create the custom control bar at the bottom: - **Play/Pause button**: icon toggles between play (▶) and pause (⏸) SVG icons - **Progress bar**: clickable and draggable seek bar showing playback position - Filled portion in accent color, buffered portion in muted color - Hover preview: show time tooltip on hover position - **Time display**: current time / total duration in `MM:SS` format - **Volume control**: volume icon + horizontal slider - Click icon to toggle mute (icon changes to muted state) - Slider adjusts volume level (0–100%) - **Fullscreen button**: expand icon to toggle fullscreen mode 3. Implement auto-hide behavior: - Controls visible on hover or during interaction - Auto-hide after 3 seconds of mouse inactivity - Show controls on any mouse movement or tap - Cursor also hides with controls 4. Add interaction polish: - Space bar toggles play/pause - Left/Right arrows seek forward/backward 10 seconds - Up/Down arrows adjust volume - Click on video area toggles play/pause - Double-click toggles fullscreen # Constraints - Use the HTML5 Video API for all control interactions - Hide native controls with CSS: `::-webkit-media-controls { display: none }` - Vanilla HTML, CSS, and JavaScript only — no libraries - All icons as inline SVG for consistent styling - Dark mode design: dark control bar with semi-transparent background - Accessible: keyboard controls, `aria-label` on all buttons, `role="slider"` on progress bar # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Use a placeholder video source (or public domain sample URL) - Well-commented code with clear sections for markup, styles, controls logic

video player controls +1
Gemini 3.1 Pro