From 666d7ff5cfea100d8fb79f8653daa24653a71945 Mon Sep 17 00:00:00 2001
From: ray <gitea@rayelliott.dev>
Date: Tue, 19 Apr 2022 16:55:00 +0100
Subject: [PATCH] toggle icon/text on orbital hover

---
 index.html | 15 ++++++++++++++-
 style.css  | 46 ++++++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 58 insertions(+), 3 deletions(-)
diff --git a/index.html b/index.html
index a53fbbd..3fee68d 100644
--- a/index.html
+++ b/index.html
@@ -8,7 +8,20 @@
   <body>
     <div id="app" class="wrapper">
 			<ul class="orbitals clockwise">
-				<li class="orbital bg bg--red pulse"><div class="orbital-content content-center anti-clockwise"><p>Hallo!</p></div></li>
+
+				<li class="orbital bg bg--red pulse">
+					<div class="orbital-content content-center anti-clockwise">
+						<div class="feature">
+							<div class="feature-item primary">
+								<img class="img" src="https://via.placeholder.com/64x64">
+							</div>
+							<div class="feature-item secondary">
+								<p>Hallo!</p>
+							</div>
+						</div>
+					</div>
+				</li>
+
 			  <li class="orbital bg bg--green pulse"><div class="orbital-content"></div></li>
 			  <li class="orbital bg bg--blue pulse"><div class="orbital-content"></div></li>
 				<li class="orbital bg bg--red pulse"><div class="orbital-content content-center anti-clockwise"><p>How's things?</p></div></li>
diff --git a/style.css b/style.css
index e3a3f58..9027ce2 100644
--- a/style.css
+++ b/style.css
@@ -7,6 +7,8 @@
 
 	--duration__rotation: 50s;
 	--duration__pulse: 1.5s;
+
+	--width__container: calc(var(--width__inner-content) + var(--width__orbital) + var(--radius__orbital));
 }
 
 body, html {
@@ -34,8 +36,10 @@ ul, li {
 
 .orbitals {
 	position: relative;
-	width: 100%;
-	height: 100%;
+	width: 0;
+	height: 0;
+	left: 50%;
+	top: 50%;
 }
 
 .orbital {
@@ -167,6 +171,44 @@ ul, li {
 	}
 }
 
+.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 {
