Overlay image on top of css animation

I am trying to overlay an image on top of this css animation. I just want it to sit right in the middle of it. I have tried playing with the z-index and different positions, but I can't seem to get it to show up. I would also like to get the colors to change when the mouse moves over different spots.

body {
  margin: 0;
  padding: 0;
}

.container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #FFB6C1 10%, #FF69B4 51%, #FFB6C1 100%);
  background-size: cover;
  animation: animate 60s linear infinite loop;
}



.clouds {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(https://image.ibb.co/cbYTjf/cloud.png);
    animation: animate 60s linear infinite;
  z-index:1;
}
.logo{
  background-image:url(https://i.vgy.me/7FcUbx.jpg)
    z-index: 10;
  position:absolute;
}

@keyframes animate {

  0% {
    background-position: 0px;
  }
  100% {
     background-position: 1063px;
    
  }

}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title> Clouds </title>

  <link rel="stylesheet" href="clouds.css">
</head>

<body>
  <div class= "container">
  </div>
  <div class="background-color"></div>

  <div class="clouds">
    <div class="logo">
    
  </div>
</body>

Solution

There are a number of ways you could achieve this. I would look into using a pseudo-element for the overlay or something but here is one way to do it.

The main problem that I saw was that you needed to define height and width for the logo.

Codepen if you prefer: https://codepen.io/zenRyoku/pen/rgWNQo?editors=1100

body {
  height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #FFB6C1 10%, #FF69B4 51%, #FFB6C1 100%);
  background-size: cover;
  animation: animate 60s linear infinite loop;
}

.clouds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('https://image.ibb.co/cbYTjf/cloud.png');
  animation: animate 60s linear infinite;
  z-index: 1;
}

.logo {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 20%;
  width: 20%;
  background: url('https://i.vgy.me/7FcUbx.jpg') center center / cover;
  z-index: 10;
  transform: translate(-50%, -50%);
}

@keyframes animate {
  0% {
    background-position: 0px;
  }
  100% {
    background-position: 1063px;
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title> Clouds </title>

  <link rel="stylesheet" href="clouds.css">
</head>

<body>
  <div class="container">
    <div class="clouds"></div>
    <div class="logo"></div>
  </div>
  
</body>