title: Change image opacity from 0 to 1 only when hovering over text (not on the image itself)
body: <p>Basically I want to change the opacity from 0 to 1 when hovering over the text in a menu. It is working. But when the user is hovering over the image it is also showing the image. I wonder if there is a possibility to make the change in the opacity only when the user is hovering over the text. I've made a jsfiddle here: <a href="http://jsfiddle.net/8PvVk/" rel="nofollow">http://jsfiddle.net/8PvVk/</a>
  html:</p>
  
  <pre><code>&lt;li id="ul1"&gt;
  
      &lt;a href="http://erasmus-plus.ro"&gt;
          &lt;img id="li1" src="http://erasmus-plus.ro/wp-content/themes/Claudiu/images/homepage.png"&gt;&lt;/img&gt;
  
          Home
  
      &lt;/a&gt;
  
  &lt;/li&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>#ul1{
  width:100px;
  height:50px;
  }
  
  #ul1 a #li1{
     position: absolute;
     top: -30px;
     opacity: 0;
     margin-left: 30px;
     transition: all 1s linear;
  
  }
  #ul1:hover #li1 {
      opacity:1;
  }
  </code></pre>
  
  <p>As you can see, if the user hovers over the image the image is showing up.
  Thanks!</p>