Subscribe

HTML Clickable Image Alternative

✍️

Exploring an alternative for image

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">
  <img
    width="467px"
    src="https://images.unsplash.com/photo-1491378630646-3440efa57c3b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80"
  />
  <a href="#sky" class="overlay overlay-sky"></a>
  <a href="#sea" class="overlay overlay-sea"></a>
  <a href="#sand" class="overlay overlay-sand"></a>
</div>

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 📖

Moving from GIF to video format

27 Jun, 2021 · 3 min read

Moving from GIF to video format

Common HTML Element Types

3 May, 2021 · 4 min read

Common HTML Element Types

Join 1513 devs and subscribe to my newsletter