--- id: css-image-modal title: "CSS Image Modal" category: "Frontend" status: "draft" verification_status: "conceptual" canonical_id: "" aliases: ["modal image", "image lightbox", "popup image", "responsive modal", "image gallery modal"] duplicate_of: "" source_trust_level: "B" confidence_score: 0.9 created_at: 2026-06-23 updated_at: 2026-06-23 review_reason: "" merge_history: [] tags: ["css", "web", "frontend", "w3schools", "images", "modal"] raw_sources: ["https://www.w3schools.com/css/css3_images_modal.asp"] applied_in: [] github_commit: "" --- # [[CSS Image Modal]] ## 🎯 ν•œ 쀄 톡찰 (One-line insight) A modal image (lightbox) lets users click a gallery thumbnail to open a larger version in a full-screen overlay, built from a hidden fixed-position modal that JavaScript shows and hides. [S1] ## 🧠 핡심 κ°œλ… (Core concepts) - **Modal overlay** β€” the modal is a full-viewport layer (`position: fixed`, `width: 100%`, `height: 100%`) hidden by default with `display: none` and shown via JavaScript. [S1] - **Dim backdrop** β€” a semi-transparent background `rgba(0, 0, 0, 0.8)` and high `z-index: 1000` darken the page behind the enlarged image. [S1] - **Zoom-in animation** β€” a `@keyframes zoomIn` animation scales the modal content from `0.6` to `1` when it opens. [S1] - **Close control** β€” a `.close` "Γ—" (`×`) element in the top-right corner closes the modal. [S1] - **Caption** β€” a `.caption` element shows the image's label, populated from the trigger's `onclick` argument. [S1] - **JavaScript control** β€” `openModal()` sets `display: "flex"` and adds a `show` class; `closeModal()` removes the class and hides the modal after a 300ms delay. [S1] ## 🧩 μΆ”μΆœλœ νŒ¨ν„΄ (Extracted patterns) - **Hidden fixed layer toggled by JS** β€” keep the modal `display: none`, then switch to a flex layout on demand to center the enlarged content. [S1] - **Class-driven transition + timed teardown** β€” add a `show` class to animate in, and on close remove it and use `setTimeout` so the exit transition finishes before `display: none`. [S1] - **Data passed via onclick args** β€” the gallery image's `onclick` passes the modal id and caption text directly into the handler. [S1] ## πŸ“– μ„ΈλΆ€ λ‚΄μš© (Details) The W3Schools example builds a responsive modal image gallery in a single HTML document combining CSS and JavaScript. [S1] ```html

Responsive Modal Images

Cinque Terre Forest Northern Lights Mountains
``` **Key components** - **Modal container** β€” `display: none` initially, `position: fixed`, `z-index: 1000`, dark semi-transparent background `rgba(0, 0, 0, 0.8)`. [S1] - **Animation** β€” zoom effect defined with `@keyframes zoomIn` scaling from `0.6` to `1`. [S1] - **JavaScript** β€” `openModal()` retrieves the element by id, sets display to `flex`, adds the `show` class, and populates the caption; `closeModal()` removes the `show` class and hides the modal after a 300ms delay. [S1] - **Responsive design** β€” media queries adjust gallery items from `25%` width (desktop) to `50%` (tablets, ≀768px) to `100%` (mobile, ≀480px). [S1] ## πŸ› οΈ 적용 사둀 (Applied in summary) The full responsive modal-image gallery above is the source's applied case, integrating a flex gallery, a fixed overlay modal, a zoom animation, a close button, captions, and the open/close JavaScript. No external project/commit applications found in the source. ## πŸ’» μ½”λ“œ νŒ¨ν„΄ (Code patterns) Toggle-by-class modal control (language: JavaScript): ```javascript function openModal(modalId, caption) { let modal = document.getElementById(modalId); modal.style.display = "flex"; modal.classList.add("show"); modal.querySelector(".caption").innerText = caption; } function closeModal(modalId) { let modal = document.getElementById(modalId); modal.classList.remove("show"); setTimeout(function () { modal.style.display = "none"; modal.querySelector(".caption").innerText = ""; }, 300); } ``` ## βš–οΈ λͺ¨μˆœ 및 μ—…λ°μ΄νŠΈ (Contradictions & updates) No contradictions found in the source. ## βœ… 검증 μƒνƒœ 및 신뒰도 - **μƒνƒœ:** draft - **검증 단계:** conceptual (μ‹€μ œ 적용 사둀 발견 μ‹œ applied/validated둜 승격 κ°€λŠ₯) - **좜처 신뒰도:** B (W3Schools β€” widely used educational reference, not a primary standards body) - **μ‹ λ’° 점수:** 0.90 - **쀑볡 검사 κ²°κ³Ό:** μ‹ κ·œ 생성 (New discovery) ## πŸ”— 지식 κ·Έλž˜ν”„ (Knowledge Graph) - **μƒμœ„/루트:** [[CSS Tutorial]] - **κ΄€λ ¨ κ°œλ…:** [[CSS Image Hover]], [[CSS Image Styling]], [[CSS Animations]], [[CSS Position]] - **μ°Έμ‘° λ§₯락:** Referenced when building an image lightbox or click-to-enlarge gallery. ## πŸ“š 좜처 (Sources) - [S1] W3Schools β€” CSS Image Modal β€” https://www.w3schools.com/css/css3_images_modal.asp ## πŸ“ λ³€κ²½ 이λ ₯ (Change history) - 2026-06-23: Initial draft synthesized from the W3Schools "CSS Image Modal" page (Astra wiki-curation, P-Reinforce v3.1 format).