What we are gonna do today is a pretty interesting thing. And it’s even mobile friends. I am gonna give an Image Hotspots through which one can click on them and learn more about that specific area. They look pretty cool and can be added to any type of project, It’s especially useful for the type of Informative Project. In order to create in only simple JS and CSS is used. No external library or anything. But this time rather than using CSS, I am gonna use SCSS. SCSS is a preprocessor for CSS and adds multiple good features into it. According to SCSS official Website, Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. It has 2 versions namely SASS and SCSS, but since SCSS is a bit easier and even use curly braces {}, that’s what I’m gonna use it.

But in order to use SCSS, you need to install a preprocessor that will automatically translate your code from SCSS to classic CSS. In order to install it, run this npm command in your terminal.

npm install -g sass

You can read more about SCSS/SASS here. Now let’s see the preview.

You might also like this.

How Do Image Hotspots work?

Image Hotspots

In order to create Image Hotspots, first, we will create a parent div with our good old container div. After that inside it, we’ll create another div with class-name of lg-container, inside this Div, there’ll be an Image element <img>, this is the tag that will contain our main image. After that we’ll create another 6 divs that will be used for the 6 hotspots that will appear on the image, having class-name of lg-hotspot top-left, top-left to define the position and lg-hotspot for its general class-name. For the sake of laziness, I’m gonna define their position right inside their parent div like this style="top: 20%; left: 32.9%;". Inside this lg-hotspot div, there’ll be 2 child elements with class-name of lg-hotspot-button and lg-hotspot-label. After defining how the button is gonna look while clicking and other stuff and adding @keyframes for the little bit of animation.

Now is JavaScript file, we’ll simply use it to hide and change the display of the lg-hotspot button. Let’s look into the code to get to know how all of the described stuff is gonna work.

Source Code for Image Hotspots.

Index.html

!DOCTYPE HTML
<HTML>

<HEAD>
	<TITLE>Evil Web Dev | Image Hotspots | Mobile Friendly</TITLE>
	<link rel="stylesheet" href="style.scss">
	<script src="script.js"></script>
</HEAD>

<BODY>
	<div class="container">
		<div class="lg-container">
			<img class="lg-image" src="https://images.pexels.com/photos/893896/pexels-photo-893896.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
			<div style="top: 20%; left: 32.9%;" class="lg-hotspot top-left">
				<div class="lg-hotspot-button"></div>
				<div class="lg-hotspot-label">
					<h4>This is the title</h4>
					<p>This is some text that goes in the label. It describes the item.</p>
				</div>
			</div>
			<div style="top: 21%; left: 88%;" class="lg-hotspot top-right">
				<div class="lg-hotspot-button"></div>
				<div class="lg-hotspot-label">
					<h4>Rocket ship</h4>
					<p>Rocket ships can be great for business. Although they cost a lot of money, they can generate ideas and take your business to new heights.</p>
				</div>
			</div>
			<div style="top: 45%; left: 15%;" class="lg-hotspot top-left">
				<div class="lg-hotspot-button"></div>
				<div class="lg-hotspot-label">
					<h4>Cashbook</h4>
					<p>What could be better than a book of cash?</p>
				</div>
			</div>
			<div style="top: 45.5%; left: 62%;" class="lg-hotspot top-right">
				<div class="lg-hotspot-button"></div>
				<div class="lg-hotspot-label">
					<h4>Gears</h4>
					<p>Gears are used in a lot of situations, but here they're probably being used metaphorically.</p>
				</div>
			</div>
			<div style="top: 83%; left: 20%;" class="lg-hotspot bottom-left">
				<div class="lg-hotspot-button"></div>
				<div class="lg-hotspot-label">
					<h4>Notes</h4>
					<p>Always take notes!</p>
				</div>
			</div>
			<div style="top: 85%; left: 91%;" class="lg-hotspot bottom-right">
				<div class="lg-hotspot-button"></div>
				<div class="lg-hotspot-label">
					<p>This is a label without a title.</p>
				</div>
			</div>
		</div>
	</div>
</BODY>

</HTML>

Style.scss

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
 $buttonRadius:24px;
 $labelPaddingX:$buttonRadius*1;
 $labelBorderRadius:2px;
 $labelFade:0.1s;
 $colorButton:#ff6000;
 $colorHoverAdd:#11174c;
 $colorText:#333;
 $colorHeadingBackground:#555;
 body {
	margin: 0;
}
* {
	box-sizing: border-box;
}
.container {
	width: 100%;
	min-height: 100vh;
	padding: 1em;
	display: flex;
	justify-content: center;
	align-items: center;
}
.lg-container {
	max-width: 550px;
	position: relative;
	padding: 0;
}
.lg-image {
	display: block;
	height: 100%;
	width: 100%;
	object-fit: scale-down;
}
.lg-hotspot {
	position: absolute;
	margin: 0;
	padding: 0;
	transform: translate(-50%, -50%);
	z-index: 0;
	&: hover, &: active {
		//  z-index: 999;
		.lg-hotspot-button {
			border-color: $colorButton + $colorHoverAdd;
			&: after {
				background-color: $colorButton + $colorHoverAdd;
			}
		}
	}
}
.lg-hotspot-button {
	height: $buttonRadius*2;
	width: $buttonRadius*2;
	padding: 0px;
	border-radius: 100%;
	border: 1px solid $colorButton;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	z-index: 999;
	animation: button-pulse 7s ease-in-out infinite;
	&: after {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		pointer-events: none;
		content: "";
		display: block;
		height: $buttonRadius*0.7;
		width: $buttonRadius*0.7;
		border-radius: 100%;
		border: 3px solid white;
		background-color: $colorButton;
		transition: border-color 1s linear;
	}
}
.lg-hotspot-label {
	position: absolute;
	padding: 0 0 1.1em 0;
	width: 16em;
	background-color: white;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	font-family: 'Open Sans', sans-serif;
	font-size: 14.5px;
	line-height: 1.45em;
	z-index: -1;
	pointer-events: none;
	border-radius: $labelBorderRadius;
	user-select: none;
	display: none;
	transition: all $labelFade linear;
	h4 {
		margin: 0;
		padding: 0.65em $labelPaddingX;
		background-color: $colorHeadingBackground;
		font-size: 1.1em;
		font-weight: normal;
		letter-spacing: 0.02em;
		color: white;
		border-radius: $labelBorderRadius $labelBorderRadius 0 0;
	}
	p {
		margin: 0;
		padding: 1.1em $labelPaddingX 0 $labelPaddingX;
		color: $colorText;
	}
}
.top-left .lg-hotspot-label {
	top: $buttonRadius;
	right: auto;
	bottom: auto;
	left: $buttonRadius;
}
.top-right .lg-hotspot-label {
	top: $buttonRadius;
	right: $buttonRadius;
	bottom: auto;
	left: auto;
}
.bottom-right .lg-hotspot-label {
	top: auto;
	right: $buttonRadius;
	bottom: $buttonRadius;
	left: auto;
}
.bottom-left .lg-hotspot-label {
	top: auto;
	right: auto;
	bottom: $buttonRadius;
	left: $buttonRadius;
}
@keyframes button-pulse {
	0% {
		transform: scale(1, 1);
		opacity: 1;
	}
	30% {
		transform: scale(1.1, 1.1);
		opacity: 1;
	}
	60% {
		transform: scale(1, 1);
		opacity: 1;
	}
	100% {
		transform: scale(1, 1);
		opacity: 1;
	}
}

and script.js

$(".lg-hotspot-label").show("fast");
$(".lg-hotspot-label").hide();

$(".lg-hotspot-button").click(function(){
  var thisLabel = $(this).siblings(".lg-hotspot-label");
  var thisLabelState = thisLabel.css("display");
  $(".lg-hotspot-label").fadeOut(0).parent().css("z-index", "0");
  if(thisLabelState=="none") {
    thisLabel.fadeIn(0);
    $(this).parent().css("z-index", "999");
  }
});

If you like this, here’s the CodePen demo.

See the Pen Image hotspots (mobile friendly) by Kamran Tahir (@Mah3svara) on CodePen.

unsplash-logoJeremy Perkins
0 CommentsClose Comments

Leave a comment