Simple Interactive Points Effect

An interactive transparency background effect that makes images visible when specific points are hovered, showing some content once clicked.

InteractivePoints_800x600







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>
		<!--...-->
	</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>

InteractivePoints_01

Every point has also a tooltip that we show when hovering:

InteractivePoints_02

When clicking on one of the points, some content gets shown and the associated image will become completely opaque.

InteractivePoints_03

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

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

Previous:
Next:

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://www.codrops.com

Related Articles

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 13

  1. 7

    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

  2. 8

    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!

  3. 12

    Very cool effect. I love coming to this site for guidance on making my websites more interactive. Thank you!

Follow this discussion

Leave a Comment