title: How to make text visible after transition moving through text
body: <p>I have some simple transition animation, I want to make text ( A href ) invisible, so I used "display: none" and I want to make it visible with "display: block" after image coming through it using "onclick" thing from javascript on that image. Here is my jsfiddle : <a href="http://jsfiddle.net/ofy4t5a8/" rel="nofollow">http://jsfiddle.net/ofy4t5a8/</a></p>
  
  <pre><code>#facebook_text a {
      position: absolute;
      font-size: 15px;
      color: #000;
      text-decoration: none;
      margin-left: 50px;
      margin-top: -10px;
      z-index: 1;
      display: none;
  }
  #facebook_image.fly {
      position: absolute;
      margin-left: 125px;
      margin-top: 0px;
      transition: all 5s ease-out;
  }
  #facebook_image img {
      position: absolute;
      z-index: 10;    
      height: 35px;
      width: 35px;
      margin-top: -15px;
  }
                              &lt;div id="facebook_text"&gt;
                                  &lt;a href="google.com" alt="facebook" target="_blank"&gt;Facebook&lt;/a&gt;
                              &lt;/div&gt;
                              &lt;div id="facebook_image"&gt;
                                  &lt;img class="image_animation" src="facebook.jpg"&gt;&lt;/img&gt;
                              &lt;/div&gt;
                              &lt;script&gt;
                                  document.querySelector('.image_animation').onmouseover=function()    {
                                  var d = document.getElementById("facebook_image");
                                  d.className = d.className + " fly";    
                                  }
                              &lt;/script&gt;
  </code></pre>