Hepl html and css

Question

I have a menu with images like 100px so when I click on it it should appear below, in a bigger way and I don't know how to do that. I could use some help.
For the gallery you must use ordered lists and articles where you will break down the elements of the gallery, note that the images will have a hyperlink to the same image (hyperlink of the image in the same window).The gallery should be dynamic so that when you click on an image it appears at the bottom, you should use the pseudo class target in css3.

Answer 1

Hii.

I've used javascript for that. Refer this :

<a href="#" class="pop">
<img src="https://cdn.pixabay.com/photo/2018/07/31/22/08/lion-3576045_1280.jpg" style="width: 100px; height: 100px;">
</a>

<div>
<img src="" class="imagepreview" style="width: 50%;" >
</div>

Javascript :-

$(function() {
$('.pop').on('click', function() {
$('.imagepreview').attr('src', $(this).find('img').attr('src'));
$('.imagepreview').addclass("img");
});
});

And Css:-

.img{
position: absolute;
bottom: 0;
transform: scale(1);
}

First of all there is a image in anchor tag. In which you can add your own style.
After that when click on image js function will be called and add (.img) class to image tag in div tag. And display the clicked image.

Hope this will be helpful to you.

Thanks!