From our sponsor: Chromatic - Visual testing for Storybook, Playwright & Cypress. Catch UI bugs before your users do.
Today we’d like to share a simple hover/click effect for images with you. The main idea is to show a map or a base image with some points of interest (POS) and when we come close to one of these points and hover, an image starts to fade in. When clicking on the POS indicator, a content layer is shown with some more information on that point; the background image becomes completely opaque. This concept could be fitting for some kind of map assisted story telling, like a travel piece or similar.
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
Since this component resizes fluidly, we have to set everything relative, including the pin positions. For that we are using an SVG layer that resizes according to the static (map) image. The pins were placed in Adobe Illustrator on top of the map. Then we take the SVG code and add it to the following structure (the “points” SVG):
<section class="interactive-points" id="interactive-1" tabindex="0">
<img class="static" src="img/map.png" alt="Map of London" />
<div class="backgrounds">
<div class="background__element" style="background-image: url(img/1.jpg)"></div>
<div class="background__element" style="background-image: url(img/2.jpg)"></div>
<!--...-->
</div>
<svg class="points" viewBox="0 0 1885 1080" width="100%" height="100%">
<path class="point" d="M409.2,195.4L409.2,195.4c-7.1-7.1-18.6-7.1-25.7,0l0,0c-6.4,6.4-7.1,18.4-1.7,25.7l14.5,21l14.5-21C416.3,213.8,415.6,201.8,409.2,195.4z"/>
<path class="point" d="..."/>
<!--...-->
</svg>
<div class="points-tooltips">
<div class="point-tooltip"><h2 class="point-tooltip__title">Rupert Street</h2><br><p class="point-tooltip__description">The connection to London Bridge that no one knew about</p></div>
<div class="point-tooltip"><!--...--></div>
<!--...-->
</div>
<div class="points-content">
<div class="point-content">
<h3 class="point-content__title">The Rupert Connection</h3>
<p class="point-content__subtitle">24<sup>th</sup> of February, 1927</p>
<p class="point-content__text">Descended from astronomers...</p>
</div>
<div class="point-content">
<!--...-->
</div>
<!--...-->
</div>
</section>
Every point has also a tooltip that we show when hovering:
When clicking on one of the points, some content gets shown and the associated image will become completely opaque.
The following options can be set:
/**
* PointsMap options/settings.
*/
PointsMap.prototype.options = {
// Maximum opacity that the background element of
// a point can have when active (mouse gets closer to it)
maxOpacityOnActive : 0.3,
// The distance from the mouse pointer to
// a point where the opacity of the background element is 0
maxDistance : 100,
// If viewportFactor is different than -1, then maxDistance
// will be overwritten by [point´s parent width / viewportFactor]
viewportFactor : 9,
// When the mouse is [activeOn]px away from
// one point, its image gets opacity = point.options.maxOpacity.
activeOn : 30
};
Credits
- Map by OpenStreetMap®. OpenStreetMap® is open data, licensed under the Open Data Commons Open Database License (ODbL) by the [OpenStreetMap Foundation (OSMF)](OpenStreetMap Foundation). Read more here: https://www.openstreetmap.org/copyright
- Location pin icon made by Madebyoliver from www.flaticon.com is licensed by CC 3.0 BY
- Vintage London images by Stockholm Transport Museum, London, England album.
- Lunar.js by Todd Motto: SVG class module for has/add/remove/toggleClass
- ChromeSupported
- FirefoxSupported
- Internet ExplorerSupported from version 11
- SafariSupported
- OperaSupported
We hope you enjoy this little component and find it useful!
“Simple” should never be in the title of one of your playgrounds, Mary Lou.
Great Work Mary!
Another great work…very nice.
How create on interactive map use google maps?
I have the same question 😉
me too
Your content is always inspirational for my designs, however a lot of the time I reduce them down a lot into the more foundational concepts.
Thanks again
This is absolutely great! I am using this set up on a site now, thanks for all the tips!
However, one thing I notice on your source files is when the browser width is resized from 970px down to 969, the pins all jump slightly to a different location on the map. I thought you should know about it as it is happening in the demo as well. Thanks again!
Codrops is the most underrated webdesign site on the net. Your stuff is mind blowing.
You’re a fantastic woman!
would like to see such nice effect in mobile view too. Please update the same at the earliest
Very cool effect. I love coming to this site for guidance on making my websites more interactive. Thank you!
Hello,
Can someone please guide me how to change the position of the markers? I am new to this.
Thanks!
Hi,
the things that make up here are really nice and I do my compliments.
This job you did gave me an idea but I can not put this on one of my site pages. I’m not a programmer and wordpress use. To use your jobs and others on this site you have to be programmers and do not use wordpress? If I can do it, is there a guide somewhere?
Thank you and congratulations!
Fabio
Hi, love the design and usability. Question, do you have to use open street maps or is it possible to upload other maps i.e. images of historical maps.
Thanks!
How to set points of marker in map