I have managed to create a CSS-only solution where clicking on an anchor displays an overlay image on top of a div. Everything works smoothly except for one issue: when the close button is clicked, it scrolls to the top of the page instead of closing and staying in the current position on the page. I attempted to add a div ID to the href but then the overlay wouldn't close. Is there a way to achieve this using only CSS? Any assistance would be greatly appreciated. Thank you.
.popup .close {
position: absolute;
top: 70px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}<div id="popup1" class="overlay">
<div class="popup">
<a class="close" href="#">×</a>
<div class="content">
<img src="./assets/map-overlay.png">
</div>
</div>
</div>