css-orbital/style.css

:root {
	--width__inner-content: 11em;
	--width__orbital: 7.5em;

	--radius__orbital: 14em;
	--radius__orbital--diagonal: calc(var(--radius__orbital) / 1.4142);

	--duration__rotation: 50s;
	--duration__pulse: 1.5s;

	--width__container: calc(var(--width__inner-content) + var(--width__orbital) + var(--radius__orbital));
}

body, html {
	padding: 0;
	margin: 0;
	background-color: rgba(0, 255, 0, 0.1);
}

.wrapper {
	position: relative;
	width: 80vw;
	height: 80vh;
	overflow: hidden;

	font-size: 1rem;

	background-color: white;
}

ul, li {
	padding: 0;
	margin: 0;
	list-style: none;
}

.orbitals {
	position: relative;
	width: 0;
	height: 0;
	left: 50%;
	top: 50%;
}

.orbital {
	position: absolute;
	width: var(--width__orbital);
	height: var(--width__orbital);
	border-radius: 50%;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);

	&:nth-child(1) {
		/* top */
		transform: translate(-50%, calc(-50% - var(--radius__orbital)));
	}

	&:nth-child(2) {
		/* top right */
		transform: translate(calc(-50% + var(--radius__orbital--diagonal)), calc(-50% - var(--radius__orbital--diagonal)));
	}

	&:nth-child(3) {
		/* right */
		transform: translate(calc(-50% + var(--radius__orbital)), -50%);
	}

	&:nth-child(4) {
		/* bottom right */
		transform: translate(calc(-50% + var(--radius__orbital--diagonal)), calc(-50% + var(--radius__orbital--diagonal)));
	}

	&:nth-child(5) {
		/* bottom */
		transform: translate(-50%, calc(-50% + var(--radius__orbital)));
	}

	&:nth-child(6) {
		/* bottom left */
		transform: translate(calc(-50% - var(--radius__orbital--diagonal)), calc(-50% + var(--radius__orbital--diagonal)));
	}

	&:nth-child(7) {
		/* left */
		transform: translate(calc(-50% - var(--radius__orbital)), -50%);
	}

	&:nth-child(8) {
		/* top left */
		transform: translate(calc(-50% - var(--radius__orbital--diagonal)), calc(-50% - var(--radius__orbital--diagonal)));
	}
}

.orbital-content {
	width: 100%;
	height: 100%;
}

.inner-content {
	position: absolute;
	width: var(--width__inner-content);
	height: var(--width__inner-content);
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);

	border-radius: 3em;
	overflow: hidden;
}

.image-hover {
	width: 100%;
	height: 100%;

	& > .img {
		position: absolute;
		width: 100%;
		height: 100%;
		inset: 0;
		object-fit: cover;

		&:last-child {
			transition: opacity .3s;
			opacity: 0;
		}
	}

	&:hover > .img {
		&:last-child {
			opacity: 1;
		}
	}
}

.content-center {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.bg {
	&::before {
		content: '';
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		border-radius: 50%;

		transition: background-color 0.5s;
	}
}

.bg--red {
	&::before {
		background-color: rgba(255, 200, 200);
	}

	&:hover::before {
			background-color: rgba(255, 150, 150);
	}
}

.bg--green {
	&::before {
		background-color: rgba(200, 255, 200);
	}

	&:hover::before {
		background-color: rgba(150, 255, 150);
	}
}

.bg--blue {
	&::before {
		background-color: rgba(200, 200, 255);
	}

	&:hover::before {
		background-color: rgba(150, 150, 255);
	}
}

.feature {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;

	& > .feature-item {
		position: absolute;
		inset: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		transition: opacity 0.5s;

		&:first-child {
			opacity: 1;
		}

		&:last-child {
			opacity: 0;
		}
	}

	&:hover {
		& > .feature-item {
			&:first-child {
				opacity: 0;
			}

			&:last-child {
				opacity: 1;
			}
		}
	}
}

.orbitals:hover {
	&.clockwise,
	& .anti-clockwise {
		animation-play-state: paused;
	}
}

.orbital.pulse:hover {
	&::before {
		animation-play-state: paused;
	}
}

.clockwise {
	animation: rotate var(--duration__rotation) linear infinite running;
}

.anti-clockwise {
	animation: rotate var(--duration__rotation) reverse linear infinite running;
}

.pulse {
	&::before {
		animation: pulse var(--duration__pulse) alternate ease-in-out infinite running;
	}

	&:nth-child(2) {
		&::before {
			animation-delay: 2s;
		}
	}

	&:nth-child(3) {
		&::before {
		animation-delay: 0.4s;
		}
	}

	&:nth-child(4) {
		&::before {
		animation-delay: 1.5s;
		}
	}

	&:nth-child(5) {
		&::before {
		animation-delay: 0.7s;
		}
	}

	&:nth-child(6) {
		&::before {
		animation-delay: 0.2s;
		}
	}

	&:nth-child(7) {
		&::before {
		animation-delay: 1.1s;
		}
	}

	&:nth-child(8) {
		&::before {
		animation-delay: 0.4s;
		}
	}
}

@keyframes rotate {
	from {
		transform: rotate(0);
	}
	to {
		transform: rotate(360deg);
	}
}

@keyframes pulse {
	from {
		transform: scale(1);
	}
	to {
		transform: scale(1.1);
	}
}