rayelliott
/
css-orbital
1
0
Fork 1
Code Issues Pull Requests Projects Releases Wiki Activity

toggle icon/text on orbital hover

This commit is contained in:
Ray Elliott 2022-04-19 16:55:00 +01:00
parent 6538f84d21
commit 666d7ff5cf
2 changed files with 58 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
index.html
View File

@ -8,7 +8,20 @@
<body> <body>
<div id="app" class="wrapper"> <div id="app" class="wrapper">
<ul class="orbitals clockwise"> <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--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--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> <li class="orbital bg bg--red pulse"><div class="orbital-content content-center anti-clockwise"><p>How's things?</p></div></li>

46
style.css
View File

@ -7,6 +7,8 @@
--duration__rotation: 50s; --duration__rotation: 50s;
--duration__pulse: 1.5s; --duration__pulse: 1.5s;
--width__container: calc(var(--width__inner-content) + var(--width__orbital) + var(--radius__orbital));
} }
body, html { body, html {
@ -34,8 +36,10 @@ ul, li {
.orbitals { .orbitals {
position: relative; position: relative;
width: 100%; width: 0;
height: 100%; height: 0;
left: 50%;
top: 50%;
} }
.orbital { .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 { .orbitals:hover {
&.clockwise, &.clockwise,
& .anti-clockwise { & .anti-clockwise {