HTML

Program for Image Gallery |HTML|

Introduction

Are you looking to showcase a collection of images in an elegant and organized manner on your website? An image gallery is the perfect solution! In this blog post, we'll guide you through creating a stunning image gallery using HTML and CSS.

Code

    
     
        <html>
        <head>
            <title>Image Gallery  </title>
            <style>
            /* CSS for the image gallery */
            div.gallery {
                margin: 5px;
                border: 1px solid #ccc;
                float: left;
                width: 180px;
            }
            
            div.gallery:hover {
                border: 1px solid #777;
            }
            
            div.gallery img {
                width: 100%;
                height: auto;
            }
            
            div.desc {
                padding: 15px;
                text-align: center;
            }
            
            img:hover {
                opacity: 0.5;
                filter: alpha(opacity=50);
            }
            </style>
        </head>
        <body>
            <div class="gallery">
                <a target="_blank" href="Desert.jpg">
                    <img src="Desert.jpg" alt="Image of Desert" width="600" height="400">
                </a>
                <div class="desc">Beautiful picture of Desert  </div>
            </div>
        
            <div class="gallery">
                <a target="_blank" href="Tulips.jpg">
                    <img src="Tulips.jpg" alt="Flowers" width="600" height="400">
                </a>
                <div class="desc">Beautiful image of flowers  </div>
            </div>
    
            <div class="gallery">
                <a target="_blank" href="Penguins.jpg">
                    <img src="Penguins.jpg" alt="Penguins" width="600" height="400">
                </a>
                <div class="desc">Beautiful image of Penguins  </div>
            </div>
    
            <div class="gallery">
                <a target="_blank" href="Jellyfish.jpg">
                    <img src="Jellyfish.jpg" alt="Jellyfish" width="600" height="400">
                </a>
                <div class="desc">Beautiful image of Jellyfish  </div>
            </div>
        </body>
        </html>


Output




Explanation

    We've used <div> elements with the class "gallery" to create individual containers for each image. Each container includes an <img> tag wrapped in an <a> tag to link to the full-size image.
We've applied CSS styles to define the layout, borders, and hover effects for the gallery.
The :hover pseudo-class is used to change the border color when the user hovers over an image.
We've also added a description (<div class="desc">) for each image.
Note:
Make sure to replace "replace_with_image_path.jpg" with the file path of your own images. You can choose any image you like to feature in your gallery. Ensure that the images are accessible and properly sized for web display.

Conclusion

     By following this guide, you can easily create a visually appealing image gallery for your website using HTML and CSS. Feel free to customize the gallery by adding more images, adjusting the styles, or incorporating additional features to suit your preferences. With a well-designed image gallery, you can effectively showcase your visual content and enhance the overall user experience on your website.

Post a Comment

0 Comments