Simple Interactive Points Effect

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







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.

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>

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!

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!

Feedback 16

Comments are closed.
  1. “Simple” should never be in the title of one of your playgrounds, Mary Lou.

  2. 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

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

  4. Codrops is the most underrated webdesign site on the net. Your stuff is mind blowing.

  5. would like to see such nice effect in mobile view too. Please update the same at the earliest

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

  7. Hello,

    Can someone please guide me how to change the position of the markers? I am new to this.
    Thanks!

  8. 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

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