CSS Only Image Hotspot CSS

css.only.image.hotspot.css

[tooltip]::before {
	content: attr(tooltip);
	pointer-events: none;
	position: absolute;
	width: 200px;
	top: calc(100% + 8px);
	left: -100px;
	background-color: black;
	padding: 8px;
	border-radius: 2px;
	color: white;
	z-index: 10;
	opacity: 0;
}

[tooltip]::after {
	content: "";
	background-color: transparent;
	position: absolute;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	border: 2px solid white;
	animation-name: pulse;
	animation-duration: 1s;
	animation-iteration-count: infinite;
}

[tooltip]:hover::before,
[tooltip]:focus::before {
	opacity: 1;
	animation-name: flip;
	animation-duration: 0.5s;
	animation-iteration-count: 1;
}

@keyframes flip {
	from {
		transform: scaleY(0);
		opacity: 0;
	}
	to {
		transform: scaleY(1);
		opacity: 1;
	}
}

@keyframes pulse {
	0% {
		opacity: 0;
		transform: scale(0);
	}
	50% {
		opacity: 0.5;
		transform: scale(0.5);
	}
	100% {
		opacity: 0;
		transform: scale(1);
	}
}