title: Display text when hover on image
body: <p>I want to both change to another image and display text when hover on an image. I've succeeded changing to another image on hover but I don't know how to display the text. And I also want to customize the text (color, size, position). My code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section id="works"&gt;
    &lt;div class="container"&gt;
     &lt;div class="desktop-12 columns"&gt;&lt;div class="border-top"&gt;&lt;/div&gt;&lt;/div&gt;
  
     
      &lt;a href="single-illustration-sidebar-left.html" class="permalink"&gt;
       &lt;div class="desktop-3 mobile-half columns"&gt;
        &lt;div class="item first-row"&gt;
         &lt;h3&gt;Bird&lt;/h3&gt;
         &lt;span class="category"&gt;Illustration&lt;/span&gt;
  
         &lt;img src="images/thumb_item01.png" onmouseover="this.src='images/thumb_item01a.png';" onmouseout="this.src='images/thumb_item01.png';"/&gt;
        &lt;/div&gt;&lt;!-- // .item --&gt;
       &lt;/div&gt;&lt;!-- // .desktop-3 --&gt;
                    &lt;div class="clear"&gt;&lt;/div&gt;
      &lt;/a&gt;
      &lt;/div&gt;&lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thank you.</p>