HTML Clickable Image Alternative


Exploring an alternative for image map

17 Jun, 2020 · 2 min read

Yesterday we had a look at the HTML map element, and as mentioned, there might be a better solution nowadays.

Today we’ll be looking at creating a very similar effect, but with cool hovers.

HTML Structure

<div class="container">
  <a href="#sky" class="overlay overlay-sky"></a>
  <a href="#sea" class="overlay overlay-sea"></a>
  <a href="#sand" class="overlay overlay-sand"></a>

So what we are doing is creating a container div with the image inside and our overlay areas. We are making three areas here to click on.

CSS Structure

We will use position: absolute to position the area’s correct. Therefore the container needs to be relative and inline.

.container {
  position: relative;
  display: inline-block;

And then for the overlays the share the following CSS:

.overlay {
  position: absolute;
  width: 100%;
  left: 0;

And then for the specific ones:

.overlay-sky {
  height: 150px;
  top: 0;
.overlay-sea {
  height: 300px;
  top: 150px;
.overlay-sand {
  height: 255px;
  bottom: 0px;

And last, we will add a very simple hover to demonstrate.

.overlay:hover {
  background: rgba(0, 0, 0, 0.3);

View and play on this Codepen.

See the Pen HTML Clickable Image Alternative by Chris Bongers (@rebelchris) on CodePen.

Browser Support

So this can be supported by every browser! It might need some hacks in the old Internet Explorers.

Thank you for reading, and let’s connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next 📖

Submit button outside the form

4 Dec, 2022 · 1 min read

Submit button outside the form

Trying out native dialog modals

8 Aug, 2022 · 3 min read

Trying out native dialog modals

Join 2099 devs and subscribe to my newsletter