DEV Community 👩‍💻👨‍💻

Cover image for HTML Clickable Image Alternative
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

And then for the overlays the share the following CSS:

.overlay {
  position: absolute;
  width: 100%;
  left: 0;
}
Enter fullscreen mode Exit fullscreen mode

And then for the specific ones:

.overlay-sky {
  height: 150px;
  top: 0;
}
.overlay-sea {
  height: 300px;
  top: 150px;
}
.overlay-sand {
  height: 255px;
  bottom: 0px;
}
Enter fullscreen mode Exit fullscreen mode

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

.overlay:hover {
  background: rgba(0, 0, 0, 0.3);
}
Enter fullscreen mode Exit fullscreen mode

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

Top comments (4)

Collapse
 
souviktests profile image
Souvik Paul

How you add those snippet to your post?

Collapse
 
dailydevtips1 profile image
Chris Bongers • Edited on

You mean in the text?

Those are markdown snippets:

Use three ` backticks for opening and three for closing

Collapse
 
souviktests profile image
Souvik Paul

I mean the black code snippets.

Thread Thread
 
dailydevtips1 profile image
Chris Bongers • Edited on

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

So

js
some code

18 Useful Github Repositories Every Developer Should Bookmark

18 Useful GitHub repositories every developer should bookmark: everything from learning resources and roadmaps to best practices, system designs, and tools.