title: Change child div position on parent hover
body: <p>On parent div hover, I want it's two child div's to move position via <code>translate</code>.</p>
  
  <p>I've tried to form my code based on <a href="https://stackoverflow.com/questions/6910049/on-a-css-hover-event-can-i-change-another-divs-styling">this approach</a>, but when applying the code to practise, it doesn't work for me, wondering why?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* HOVER DEFINED HERE */
  
  .cta-wrapper:hover + .cta-image {
    transform: translate(20px, 5px);
  }
  
  .cta-wrapper:hover ~ .cta-text {
    transform: translate(-10px, -10px);
  }
  
  /************************/
  
  .cta-wrapper {
      position: relative;
      padding-right: 15px;
      padding-left: 15px;
      width: 98.33333%;
      transition: all 0.3s;
      max-width: 1220px;
      padding: 0 20px 80px;
      margin: 0 auto;
  }
  .cta-wrapper a {
      text-decoration: none;
      text-align: left;
      color: #fff;
  }
  .cta-image {
      transition: all 0.2s;
      z-index: 100;
      position: relative;
  }
  .cta-text {
     width: 295px;
      text-align: left;
      padding: 30px;
      transform: translate(10px, -10px);
      transition: all 0.2s;
      background-color: #404262;
  }
  .card {
      display: block;
      border: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="cta-wrapper"&gt;
    &lt;a href="#" class="card inverse-text"&gt;
  
  
      &lt;div class="cta-image"&gt;&lt;img src="https://cdn2.hubspot.net/hubfs/548247/Tomorrow%20People/Landing%20Page/Template%20Build/GC_Jan_2017_137.png?t=1530188524021"&gt;&lt;/div&gt;
    &lt;/a&gt;
    &lt;div class="cta-text"&gt;
      &lt;a href="#" class="card inverse-text"&gt;
        &lt;h3&gt;Nam quis dolor id justo aliquet cursus in malesuada ante.&lt;/h3&gt;
        &lt;p&gt;Morbi vel efficitur orci, sit amet gravida dui. Integer dapibus ac mi a volutpat. Sed sed augue pulvinar, dignissim mauris non.&lt;/p&gt;
      &lt;/a&gt;
      &lt;div class="fake-button"&gt;&lt;a href="#" class="card inverse-text"&gt;&lt;/a&gt;&lt;a href="#"&gt;Read more &lt;/a&gt;&lt;i class="arrow"&gt;&lt;/i&gt;&lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>