title: Changing div position with css on hover
body: <p>In the following code, I want to keep the <code>.link1</code> and <code>.link2</code> hidden, and on hover over the <code>.image</code>, I want make them visible with the transition effect so that the <code>link1</code> moves from the left and <code>link2</code> moves from the right and they both come to the center of the div.</p>
  
  <p>I am trying following code, but it does not work:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="wrap"&gt;
    &lt;div class="image"&gt;&lt;img src="http://farm9.staticflickr.com/8043/8357588952_94cee71fef.jpg" /&gt;&lt;/div&gt;
    &lt;div class="hover"&gt;
       &lt;a class="link1"&gt;Link 1&lt;/a&gt;
       &lt;a class="link2"&gt;Link 2&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.wrap{
    margin: 100px;
    width: 500px;
    overflow: hidden;
    position: relative;
  }
  
  .image{
    border: 1px solid red;
    -webkit-transition: all 0.4s; 
      -moz-transition: all 0.4s; 
      transition: all 0.4s;
  }
  
  .hover{
    position: absolute;
    top: 40%;  
  }
  
  .link1{
      display: inline-block;
      width: 70px;
      height: 30px;
      background: yellow; 
       position: absolute;
       left: -100%;
  }
  
  .image:hover .link1{
     left: 40%;  
  }
  
  .link2{
      display: inline-block;
      width: 70px;
      height: 30px;
      background: yellow; 
       position: absolute;
       right: -100%;
  }
  
  .image:hover .link2{
     right: 40%;  
  }
  </code></pre>
  
  <p><strong>Demo:</strong> <a href="http://jsfiddle.net/XjTyJ/" rel="nofollow">http://jsfiddle.net/XjTyJ/</a></p>