HTML Clickable Image Alternative

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 permalink

<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 permalink

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 permalink

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! permalink

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