#AD 50 Projects In 50 Days (HTML, CSS & JavaScript) - Sharpen your skills by building 50 mini projects!
#css #html

Add CSS animated hotspot links to a responsive image

By Michael Burrows | Last modified August 28th 2020 | GitHub Source Code [GitHub]

Hotspots are visual indicators applied over an image with a call to action (hyperlink, tooltip, modal).  

In this example we’ll be applying hotspots to highlight some features of a car interior.

Let’s get started with the HTML.

<div class="hotspots"> <img src="https://images.pexels.com/photos/1104768/pexels-photo-1104768.jpeg" /> <a href="#" class="hotspot" id="hs-a">A</a> <a href="#" class="hotspot" id="hs-b">B</a> <a href="#" class="hotspot" id="hs-c">C</a> </div>
Code language: HTML, XML (xml)

If you want to add more hotspot just be sure to give them a unique id.

Now for the CSS.

For this to work we need a relative positioned parent (hotspots) and absolute positioned children (hotspot).

.hotspots { position: relative; } .hotspots img { max-width: 100%; height: auto; display: block; } .hotspot { position: absolute; width: 30px; height: 24px; padding-top: 6px; border: 3px solid rgb(255, 255, 255, 0.8); border-radius: 50%; animation: fader 2s ease infinite; transition: all 0.2s; text-align: center; text-decoration: none; font-weight: bold; font-family: sans-serif; color: #555; } .hotspot::after { content: ""; width: 24px; height: 24px; background-color: #fff; border-radius: 50%; display: block; margin: -21px auto 0 3px; transition: all 0.2s; }
Code language: CSS (css)

We can now position our hotspots in the desired locations using percentage based measurements.

#hs-a { top: 50%; left: 25%; } #hs-b { top: 32%; left: 44%; } #hs-c { top: 25%; left: 68%; }
Code language: CSS (css)

If you resize your browser the hotspots will now maintain their position over the image.

To finish we’ll add some simple animation and some hover effects.

The following CSS will make the hotspots green on hover and also fade in and out the border.

hotspot:hover { border-color: lightseagreen !important; animation-play-state: paused; color: #fff; } .hotspot:hover::after { background-color: lightseagreen; } @keyframes fader { 50% { border-color: rgb(255, 255, 255, 0.2); } 100% { border-color: rgb(255, 255, 255, 0.8); } }
Code language: CSS (css)

Related Posts