• Home
  • blog
  • Simple Interactive Points Effect

Simple Interactive Points Effect


View demo Download source

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.

Attention: We are using several techniques that might not work well in older/unsupported browsers.

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>
	<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="..."/>
	<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 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 class="point-content">


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


Browser Support:

  • ChromeSupported
  • FirefoxSupported
  • Internet ExplorerSupported from version 11
  • SafariSupported
  • OperaSupported

We hope you enjoy this little component and find it useful!

View demo Download source

Simple Interactive Points Effect was written by Mary Lou and published on Codrops.