Skip to content

Instantly share code, notes, and snippets.

@syafiqfaiz

syafiqfaiz/image.html

Created January 30, 2025 13:13
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save syafiqfaiz/2e7b7a658377020fa917a93a96d3e09e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save syafiqfaiz/2e7b7a658377020fa917a93a96d3e09e to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. syafiqfaiz created this gist Jan 30, 2025.
    72 changes: 72 additions & 0 deletions image.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,72 @@
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Gallery with Search</title>
    <style>
    body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
    }
    .search-box {
    margin-bottom: 20px;
    }
    input[type="text"] {
    padding: 10px;
    width: 60%;
    font-size: 16px;
    }
    .gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    }
    .gallery img {
    width: auto;
    height: auto;
    max-width: 300px;
    max-height: 200px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
    }
    .gallery img:hover {
    transform: scale(1.05);
    }
    </style>
    </head>
    <body>
    <h1>Image Gallery</h1>
    <div class="search-box">
    <input type="text" id="search" placeholder="Search for images..." onkeyup="filterImages()">
    </div>
    <div class="gallery" id="gallery">
    <img src="https://via.placeholder.com/300x200" alt="Nature">
    <img src="https://via.placeholder.com/250x150" alt="City">
    <img src="https://via.placeholder.com/350x250" alt="Mountains">
    <img src="https://via.placeholder.com/200x200" alt="Ocean">
    <img src="https://via.placeholder.com/400x300" alt="Forest">
    </div>

    <script>
    function filterImages() {
    let input = document.getElementById('search').value.toLowerCase();
    let images = document.querySelectorAll('.gallery img');

    images.forEach(img => {
    let altText = img.alt.toLowerCase();
    if (altText.includes(input)) {
    img.style.display = "block";
    } else {
    img.style.display = "none";
    }
    });
    }
    </script>
    </body>
    </html>