Create Expanding Image Gallery

PHOTO EMBED

Wed Dec 27 2023 12:46:58 GMT+0000 (Coordinated Universal Time)

Saved by @im_haider 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            margin: 0;
            font-family: 'Arial', sans-serif;
        }

        .gallery {
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-top: 20px;
        }

        .image-container {
            overflow: hidden;
            width: 200px; /* Initial small width */
            transition: width 0.3s;
        }

        .image-container img {
            width: 100%;
            height: auto;
        }

        .image-container:hover {
            width: 300px; /* Expanded width on hover */
        }
    </style>
    <title>Expandable Image Gallery</title>
</head>
<body>

<div class="gallery">
    <div class="image-container" onmouseover="expandImage(this)" onmouseout="shrinkImage(this)">
        <img src="https://i.ibb.co/hVhHwwB/Untitled-design-30.png" alt="Image 1">
    </div>
    <div class="image-container" onmouseover="expandImage(this)" onmouseout="shrinkImage(this)">
        <img src="https://i.ibb.co/D9gvWV3/Untitled-design-29.png" alt="Image 2">
    </div>
<div class="image-container" onmouseover="expandImage(this)" onmouseout="shrinkImage(this)">
        <img src="https://i.ibb.co/hVhHwwB/Untitled-design-30.png" alt="Image 1">
    </div>
    <div class="image-container" onmouseover="expandImage(this)" onmouseout="shrinkImage(this)">
        <img src="https://i.ibb.co/D9gvWV3/Untitled-design-29.png" alt="Image 2">
    </div>
    <!-- Add more image containers as needed -->
</div>

<script>
    function expandImage(element) {
        element.style.width = "300px";
    }

    function shrinkImage(element) {
        element.style.width = "100px";
    }
</script>

</body>
</html>
content_copyCOPY