title: Fade div on hover and display additional text on top
body: <p>I'm looking for a way to fade out a div when you hover over it and then display text on top of that div. I can accomplish the fade out a number of ways; however, I'm struggling to find a way to combine the fade out with displaying the additional text. Here's what I have as far as the fade out:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;a href="#"&gt;
      &lt;div class="myDiv"&gt;Lorem ipsum dolor sit amet&lt;/div&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.myDiv{
      width: 200px;    
  }
  
  .myDiv:hover{
      opacity: .3;
      -webkit-transition: all .5s ease-in-out;
      -moz-transition: all .5s ease-in-out;
      -o-transition: all .5s ease-in-out;
      transition: all .5s ease-in-out;
  }
  
  a{
      text-decoration:none;
      color: #000000;
  }
  </code></pre>
  
  <p>Here is a fiddle: <a href="https://jsfiddle.net/p6go1hdy/" rel="nofollow">JSFiddle</a></p>
  
  <p>I want the whole <code>div</code> to be a hyperlink to another page, and when the user hovers over the <code>div</code>, the main text fades out and text such as "Click here to view more" displays on top of the faded text.</p>
  
  <p>Thanks in advance for any suggestions.</p>