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

I didn't understand your question very well, but I will try to help for what I understood..
so you have an image, and when you click on it, you want it to appear below & bigger..

with just HTML & CSS you can make this by checkbox:
<input id="check" type="checkbox" >
<label for="check">
<img src="location/img" />
</label>

<style>
input {display: none;}
input:checked ~ #img{
position: absolute;
bottom: 0;
transform: scale(2);
}
</style>

If you want to do it with hyperlinks, then you have to try the same styling but with :active pseudo selector I guess.

I hope this works & help you

Answer 2

I think it's better to do it with JavaScript.. so you have not to make the image hyperlink, like this:

<img src="location/img" id="myImg" onclick="show(this.id);" />

<script>
function show(id){
let image = document.getElementById(id);
// let it go to the bottom
image.style.display = "absolute";
image.style.bottom = "0";
// scale it up 2x (make it bigger twice)
image.style.transform = "scale(2, 2)";
}
</script>

another way:
or you can make another img tag in the place where you want the pressed image to go to, & not put src value in it (img tag without src = hidden img tag), and then you can style it as you you want the clicked image to appear after clicking on it, & assign its src value to the clicked image src value by JavaScript

Answer 3

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!