Chmurki nabrały szlachetności.

Plik HTML

<!DOCTYPE html>
<html lang="pl">
<head>
 <meta charset="UTF-8">
 <title>Chmurki</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <button> Uruchom</button>
 <div class="wrapper">
  <img src="chmurkan.png">
  <img src="chmurkag.png">
  <img src="slonce.png">
  <img src="miasto.png">
 </div>
</body>
</html>

Plik style.css

* {margin: 0; padding: 0; box-sizing: border-box;}

div.wrapper {
 height: 100vh;
 background-color: darkblue;
 transition: 3s;
}

button:hover + div.wrapper {
 background-color: #ddeeff;
}

button {
 width: 150px;
 height: 50px;
 font-size:25px;
 position: absolute;
}

img {
 position: fixed;
 left: 0;
 z-index: 10;
}

img:nth-child(1) {
 /*chmura niebieska*/
 top: 10%;
 left: -20%;
 width: 40%;
 z-index: 7;
 transition: 70s;
}
button:hover + div.wrapper img:nth-child(1) {
 /*chmura niebieska*/
 left: 100%;
 width: 20%;
}

img:nth-child(2) {
 /*chmura granatowa*/
 top: 25%;
 left: -30%;
 width: 30%;
 z-index: 8;
 transition: 50s;
}

button:hover + div.wrapper img:nth-child(2) {
 /*chmura granatowa*/
 left: 100%;
}

img:nth-child(3) {/*slonce*/
 top: 15%;
 left: -20%;
 width: 20%;
 z-index: 6;
 transition: 10s;
}
button:hover + div.wrapper img:nth-child(3) {
 /*slonce*/
 top: 3%;
 left: 50%;
 width: 10%;
}

img:nth-child(4) {/*miasto*/
 bottom: 0;
 width: 100%;
 z-index: 9;
 transition: 10s;
}