HTML
<article class="earth-demo">
<div class="earth">
<div class="more-info">
<h1>Earth</h1>
<ul>
<li>Third planet from the Sun</li>
<li>Atmosphere: 21% oxygen</li>
<li>Liquid water on surface</li>
<li>Only planet that has life (that we know of)</li>
</ul>
</div>
<img src="https://cssanimation.rocks/images/random/earth.png">
</div>
<div class="moon-container">
<div class="moon">
<img src="https://cssanimation.rocks/images/random/moon.png">
</div>
</div>
</article>
SCSS
body {
-webkit-font-smoothing: antialiased;
}
.earth-demo {
background: #000;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
}
.earth-demo:before {
background: url(https://cssanimation.rocks/images/random/space2.jpg) repeat center;
background-size: cover;
content: "";
opacity: .5;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.earth {
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
img {
height: 200px;
width: 200px;
position: absolute;
top: 0;
left: 0;
}
.more-info {
background-image: linear-gradient(to bottom, rgba(10,10,10,1), black);
border-radius: 1em;
color: #fff;
opacity: 0;
padding: 1em;
transform: scale(.8);
transform-origin: 0 0;
width: 400px;
h1 {
margin: 0 0 1em;
text-align: right;
}
h1, li {
font-family: 'Space Mono', monospace;
opacity: 0;
}
}
}
.moon-container {
position: absolute;
top: calc(50% - 25px);
left: calc(50% - 25px);
}
.moon {
animation: spin 20s linear infinite;
background: none;
width: 50px;
height: 50px;
pointer-events: none;
transform-origin: 25px;
img {
transform: translateX(-160px) translateY(-160px);
width: 50px;
}
}
.earth img, .moon img {
border-radius: 50%;
box-shadow: 0 0 12em 1em rgba(110, 140, 200, .6);
}
.earth:hover, .earth.active {
img {
transform: translateX(-75px) translateY(-75px) scale(.5);
}
~ .moon-container {
transform: translateX(-75px) translateY(-75px) scale(.4);
img {
transform: translateX(-140px) translateY(-140px);
}
}
.more-info {
opacity: 1;
transform: scale(1);
h1, li {
opacity: 1;
}
}
}
* {
transition: all 4s cubic-bezier(0,1.5,.3,1);
}
@keyframes spin {
to {
transform: rotateZ(360deg);
}
}
