title: Targetting animation/keyframes inside seperate divs
body: <p>I am trying to hover to pause functionality to my pure css slider. At one point I had it pausing, but then I wanted to add in a div displaying that it is paused. It came to my attention during this process, that one element can not action another element coming before it. So I put the "pause display div", and the pictures, into a "slider_cover" div in order to action elements coming after itself. I am able to action the "pause display div," but now the pictures in the div immediately after the "pause display div." I just need to know how/which selectors to use to action both divs, one into showing itself, and the other into "animation-play-state: paused;"</p>
  
  <p>The following is the code I am working with:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="slider_cover"&gt;&lt;/div&gt;
      &lt;div id="pause" class="pause"&gt;
          &lt;p&gt;Paused&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="slider_bg"&gt;
              &lt;div class="picslider"&gt;         
                  &lt;img id="pic1" class="slide pause" src="./Pictures/pic1.png"&gt;&lt;/img&gt;
                  &lt;img id="pic2" class="slide pause" src="./Pictures/pic2.png"&gt;&lt;/img&gt;
                  &lt;img id="pic3" class="slide pause" src="./Pictures/pic3.png"&gt;&lt;/img&gt;
              &lt;div id="progress" class="pause"&gt; &lt;/div&gt;
              &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#pause p {
  position: relative;
  font-size: 32pt;
  font-weight: bold;
  margin-top: 25px;
  text-align: center;
  color: white;
  
  }
  #slider_cover {
  position: absolute;
  top: 135px;
  left: 250px;
  opacity: 0;
  width: 750px;
  height: 550px;
  z-index: 12;
  }
  #slider_cover:hover + #pause{
  max-height: 100px;
  }
  #slider_cover:hover img:nth-of-type(1) {
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -o-animation-play-state: paused;
  }
  </code></pre>
  
  <p>Sorry ahead of time for the mass of CSS. Please stick to CSS/HTML answers, And thanks for any effort in advance!!</p>