Image Gallery with Modal Preview
Home
Snippets
Image Gallery with Modal Preview
HTML
CSS
JS
<h2>Image Gallery</h2> <div class="gallery"> <img src="https://picsum.photos/300/200?1" onclick="openModal(this.src)"> <img src="https://picsum.photos/300/200?2" onclick="openModal(this.src)"> <img src="https://picsum.photos/300/200?3" onclick="openModal(this.src)"> </div>
body { font-family: Arial, sans-serif; background: #f4f6f8; text-align: center; } .gallery { display: flex; justify-content: center; gap: 10px; margin-top: 40px; } .gallery img { width: 120px; height: 80px; border-radius: 8px; cursor: pointer; transition: transform 0.3s; } .gallery img:hover { transform: scale(1.1); } .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); justify-content: center; align-items: center; } .modal img { max-width: 80%; max-height: 80%; border-radius: 10px; }
function openModal(src) { document.getElementById("modalImg").src = src; document.getElementById("modal").style.display = "flex"; } function closeModal() { document.getElementById("modal").style.display = "none"; }
Ad #1
Ad #2
Scroll to Top