title: Change text opacity on hover and during transition in css
body: <p>I have an image which contains text which is hidden initially(below example "hello" is hidden initally).</p>
  
  <p>When I hover over the text it should show up.</p>
  
  <p>Also I am moving the image from one location to another using "transition".</p>
  
  <p>The hover effect for the text should remain same when the image is moving from one location to another.</p>
  
  <p>As in the below example I want the text "hello" to have the above effect.</p>
  
  <pre><code>&lt;div id="image-3"&gt;
      &lt;img src="sample.jpg" height="110" width="110"&gt; 
      &lt;div&gt;
          &lt;p&gt;Sample&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="hello-text-right"&gt;
          &lt;span&gt;Hello&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>For transition of the text I have css like this. But in this case the text travels faster than the image to the final location.</p>
  
  <pre><code>#image-3 #hello-text-right{
      opacity:0;
  }
  
  #image-3:hover #hello-text-right:hover{
      opacity:1;
      transition: all 0s linear 0s;
  }
  </code></pre>
  
  <p>Any help would be appreciated on this.</p>