JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>

<html>

<head>
	<title>Trying overlay</title>
</head>

<body>

<img src="Webp.net-resizeimage.png" usemap="#image-map" class="imgdigitallearning">

	<div id="overlay" onclick="off()">
		<div id="text"><p class="styleoverlay">Blended Learning is a mix of two digital learning processes.</p></div>
	</div>

	<div id="overlay" onclick="off()">
		<div id="text"><p class="styleoverlay">Gamification is the use of games within or as a digital learning process.</p></div>
	</div>

	<button onclick="on()">
		<map name="image-map">
			<area alt="Blended Learning" title="Blended Learning" coords="911,99,77" shape="circle" class="digitallearningoverlay">
			<area alt="Gamification" title="Gamification" coords="736,55,48" shape="circle" class="gamificationoverlay">   
		</map>
	</button>
  
<script>
function on() {
  document.getElementById("overlay").style.display = "block";
}

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

CSS

<style>
	
.imgdigitallearning{
	margin-left:65px;
	margin-right:20px;
	}
#overlay{
	position: fixed; 
	display: none; 
	width: 90%; 
	height: 520px;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin-left:5%;
	margin-top:5%;
	background-color: rgba(0,0,0,0.8); 
	z-index: 2; 
	cursor: pointer; 
	}
.styleoverlay{
	text-align:center;
	margin-left:20%;
	margin-right:20%;
	margin-top:20%;
	font-size:50px;
	color:white;
	}
  
	</style>