title: Show title tag on hover inside img
body: <p>Hi I need show a Title tag of img inside img.</p>
  
  <p>Like this example <a href="http://jsfiddle.net/51csqs0b/" rel="nofollow">http://jsfiddle.net/51csqs0b/</a></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-css lang-css prettyprint-override"><code>.image {
      position:relative;
      width:200px;
      height:200px;
  }
  .image img {
      width:100%;
      vertical-align:top;
  }
  .image:after, .image:before {
      position:absolute;
      opacity:0;
      transition: all 0.5s;
      -webkit-transition: all 0.5s;
  }
  .image:after {
      content:'\A';
      width:100%; height:100%;
      top:0; left:0;
      background:rgba(0,0,0,0.6);
  }
  .image:before {
      content: attr(data-content);
      width:100%;
      color:#fff;
      z-index:1;
      bottom:0;
      padding:4px 10px;
      text-align:center;
      background:red;
      box-sizing:border-box;
      -moz-box-sizing:border-box;
  }
  .image:hover:after, .image:hover:before {
      opacity:1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div data-content="Here is a caption" class="image"&gt;
      &lt;img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" /&gt;
  &lt;/div&gt;
  
  &lt;hr&gt;
      
  &lt;div data-content="Different caption here..." class="image"&gt;
      &lt;img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" /&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But i don't want use a div before img.</p>
  
  <pre><code>&lt;a href="#"&gt;&lt;img class="" title="TITLE NEED SHOW ON HOVER" src=""/&gt;&lt;/a&gt;
  </code></pre>
  
  <p>It's possible to show up?
  Thanks</p>