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

<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 are going to 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

Comments

[Souvik Paul]

How you add those snippet to your post?

[Chris Bongers]

You mean in the text?

Those are markdown snippets:

Use three ` backticks for opening and three for closing

[Souvik Paul]

I mean the black code snippets.

[Chris Bongers]

Hey, yes you make those by using three backticks (`)

So

js
some code