Creating Layered Graphics or Interactive Images on Web Page

Hey, guys.

I have a side project I'm messing around with.  I'm making a web site and I would like for it to have some interactive images, but I don't know where to start.

One Page:
- On the web page is a grid.
- Within each box of the grid, there is a basic symbol, such as a circle
- When one hovers over the circle, a preview appears of an image or video specific to that circle
- When one clicks on the circle or on the preview, the image or video opens in a new window, new tab or some other way which doesn't obscure the grid
- A user can change the symbol from a circle to an X (or something else)

Another Page:
- On the web page is an image, such as a map
- On that image are buttons
- When a user clicks on a button, icons specific to that button appear on the map.
- When the users clicks again, the icons disappear
- There can be multiple types of icons on the map

For the latter page, I'm thinking of a basic image with layers and the buttons simply make the layers visible or invisible.

Regardless, I don't have a clue where to begin.  Do I use something like Adobe Animate? Is there some other tool out there which can create this type of interactive content on a website?

So far, waving my VooDoo stick at the screen and chanting hasn't helped.

Thanks!