HTML, CSS Image gallery

Project Description:

In this project we are going to make a responsive image gallery using HTML, CSS, & javascript

Gallery will be Responsive and Attractive.
Gallery will have Two sections one for active view and other for list of images to select.on selecting the list of image it will render to active view.

Requirements:

You must know how to handle functions with html elements.
You must know how to handle 'this' property.

Challenge:

If you want to make a Image gallery with the help of description and guidelines above, you can try our Editor above:

Gallery must be exactely same as described above.
Gallery should look like this.

Guides:

Place two div sections one for active view and other for list of images to store
Inside active div place one of the image from list with bigger height and width.
Place all the images inside second div with small height and width with display:inline-flex property.
Add css to the second div so it will not show scrollbar while scrolling.with: ::-webkit-scrollbar
Add a javascript functionality: so, when one of the image in list is selected it will render to active view.

If you want to take a challenge don't scroll below.

Source code for html css js gallery

HTML

        <div class="content">
            <div class="act">
                <img src="images/image1.jpg" alt="img" id="active">
            </div>
        <div class="list" >
            <img src="images/image1.jpg" alt="image" onclick=fun(this)>
            <img src="images/image2.jpg" alt="image" onclick=fun(this)>
            <img src="images/image3.jpg" alt="image" onclick=fun(this)>
            <img src="images/image4.jpg" alt="image" onclick=fun(this)>
            <img src="images/image5.jpg" alt="image" onclick=fun(this)>
            <img src="images/image6.jpg" alt="image" onclick=fun(this)>
            <img src="images/image7.jpg" alt="image" onclick=fun(this)>
            <img src="images/image1.jpg" alt="image" onclick=fun(this)>
            <img src="images/image2.jpg" alt="image" onclick=fun(this)>
            <img src="images/image3.jpg" alt="image" onclick=fun(this)>
            <img src="images/image4.jpg" alt="image" onclick=fun(this)>
            <img src="images/image5.jpg" alt="image" onclick=fun(this)>
            <img src="images/image6.jpg" alt="image" onclick=fun(this)>
            <img src="images/image7.jpg" alt="image" onclick=fun(this)>
         
        </div>
        </div>

CSS

        .content {
            width: 90%;
            margin:auto;
            height:80vh;
        }
        .act img {
            width:100%;
            height:70vh;
            object-fit: cover;
        }
        .list {
        width:100%;
        overflow-x: scroll;
        overflow-y: hidden;
        top:500px;
        height:100px;
        display:inline-flex;
        }
        .list::-webkit-scrollbar {
            display:none;
        }
        .list img {
            width: 100px;
            height:100px;
            margin:2px;
            object-fit: cover; 
        }
        .list img:hover {
            opacity: 0.8;
            border: 1px solid red;
            transform: rotate(5deg);
        }

        function fun(x) {
            let active=document.getElementById("active");
            active.src=x.src;
            }

PREVIEW:

Challenge-2:

Remove 'onclick=fun(this)' from html and achive same using javascript 'addEventListener'.