title: CSS fade-in background image
body: <p>I'm learning CSS and I want to make that on a hover on some text, the text disappears and there is a fade-in on an image. I've tested some things but it doesn't work the way I want to do it.</p>
  <p>The text is a link  in a  and on the hover I set the background image. I could use an  in the  but I want the text to be in the middle of the  and it's already in a  with an absolute position.</p>
  <p>Here's the HTML :</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;header&quot;&gt; 
    &lt;!--&lt;ul&gt;--&gt;
    &lt;div class=&quot;header_element&quot;&gt;
      &lt;a title=&quot;Home&quot; href=&quot;page.php&quot;&gt; Home &lt;/a&gt;
    &lt;/div&gt;
  </code></pre>
  <p>And the CSS :</p>
  <pre class="lang-css prettyprint-override"><code>    div.header_element {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        height: 100%;
      }
  
      div.header_element:hover {
        background-position: center;
        background-image: url(&quot;hover.png&quot;);
        background-repeat: no-repeat; 
      }
  </code></pre>
  <p>Would appreciate if anyone could help me with this.</p>