title: Move 2 different divs on hover on a third different div
body: <p>My page has 3 divs that are located horizontally.  I need to make the 2 divs move to the sides of the page (left div move to left, and right div move to right) when the center div is on hover.  I can make the left div move, but the right div isn't moving.  I hope to get this achieved using CSS, if not please advise.  Thanks a lot.</p>
  
  <p>My code is like the below:</p>
  
  <pre><code>.container 
     {
      position:absolute; bottom:0; right:0; left:0;
      margin-right:auto; margin-left:auto;
      width:50%; height:10%;
     }
  .a {position:absolute; bottom:0; left:20px; width:30%;}
  .b 
     {
      position:absolute; bottom:0; right:0; left:0;
      margin-right:auto; margin-left:auto; width:30%;
     }
  .c {position:absolute; bottom:0; right:20px; width:30%;}
  
  .b:hover + .a{
  -moz-transform:translatex(-50px);
  -ms-transform:translatex(-50px);
  -o-transform:translatex(-50px);
  -webkit-transform:translatex(-50px);
  transform:translatex(-50px);
  }
  
  .b:hover + .c{
  -moz-transform:translatex(50px);
  -ms-transform:translatex(50px);
  -o-transform:translatex(50px);
  -webkit-transform:translatex(50px);
  transform:translatex(50px);
  }
  
  &lt;div class="container"&gt;
      &lt;div class="b"&gt;Div b&lt;/div&gt;
      &lt;div class="a"&gt;Div a&lt;/div&gt;
      &lt;div class="c"&gt;Div c&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>