Interactive Image Maps and Closable Popups with HTML and CSS only

Mate Marschalko
8 min readOct 1, 2021

Interactive, clickable images and animated closable popup boxes are usually tasks for JavaScript. But what if I told you it can all be done with just HTML and CSS?

All you need is HTML and CSS

This is an example project from my book, All you need is HTML and CSS:

There are many other examples in the book pushing the limits of HTML and CSS including interactive carousels, accordions, calculating, counting, advanced input validation, state management, dismissible modal windows, and reacting to mouse and keyboard inputs. There’s even an animated pure CSS clock (analogue and digital) and a fully working star rating widget!

--

--

Mate Marschalko

Senior Creative Developer, Generative AI, Electronics with over 15 years experience | JavaScript, HTML, CSS