How to show an expanded image as an overlay

JavaScript
1

Hi everybody!

I’m trying to show images in an oyerlay window expanded (means width=100%)
I’m a complete beginner in HTML, JScript or CSS so it’s no miracle that I didn’t came very far.

To show what I mean:

<!DOCTYPE html>
<html>
	<head>
	
	<style>
	#overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 2;
  cursor: pointer;
  }
	</style>
	
	<script>
function on() {
  document.getElementById("overlay").style.display = "block";
}

function off() {
  document.getElementById("overlay").style.display = "none";
}	
	</script>
	
	</head>

	<body>
	
	<div id="overlay">
	<a href="#" onclick="off()">
		<img src="https://images.unsplash.com/photo-1538367999111-0d6c7fb0299f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60'" width="100%" alt="">
	</a>
	
		</div>
	
		
	<table>
		<tr>
			<td>
			<a href="#" onclick="on()"><img src="https://images.unsplash.com/photo-1538367999111-0d6c7fb0299f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60'" width="30%" alt=""></a>
			</td>
			<td>
			<a href="#" onclick="on()"><img src="https://images.unsplash.com/photo-1538367999111-0d6c7fb0299f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60'" width="30%" alt=""></a>
			</td>
			<td>
			<a href="#" onclick="on()"><img src="https://images.unsplash.com/photo-1538367999111-0d6c7fb0299f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60'" width="30%" alt=""></a>
			</td>
			<td>
			<a href="#" onclick="on()"><img src="https://images.unsplash.com/photo-1538367999111-0d6c7fb0299f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60'" width="30%" alt=""></a>
			</td>
		
		</tr>
	</table><hr>


	</body>

</html>

My webpage shows 20+ images in a small size (width=30%). What I want to have is clicking on an image should show the image expanded zu width=100% in an overlay window. Another klick on the expanded picture should remove/close the overlay.
I have absolutely no idea how to make it with ID or class in the IMG-Tag so that the specific image is shown.

Can anybody help me?

2

Building a lightbox view is part of the fCC JavaScript lessons: https://www.freecodecamp.org/learn/full-stack-developer/lab-lightbox-viewer/build-a-lightbox-viewer

You can start learning about this here: https://www.freecodecamp.org/learn/full-stack-developer/lecture-working-with-the-dom-click-events-and-web-apis/what-is-an-api-and-what-are-web-apis

If you are a complete beginner, then you might want to start at the beginning and learn all you will need to know: https://www.freecodecamp.org/learn/full-stack-developer/