image上にmouseoverで文字をかぶせる

仕様

imgタグのaltをimgタグにmouseoverしたとき表示する
figure,figcaptionを利用
面倒がおおいのでjQueryを利用
画像サンプルはplacehold.jpを利用

ソース

HTML

test_4.html

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="test_4.js"></script>
<title>test_4:image上にmouseoverで文字をかぶせる</title>
</head>
<body>
<div class="myimage">
<img src="https://placehold.jp/ff0000/00ffff/150x150.png?text=1" class="alt_text" alt="あああ">
<img src="https://placehold.jp/00ff00/ff00ff/300x200.png?text=2" class="alt_text" alt="いいい">
<img src="https://placehold.jp/0000ff/ffff00/100x80.png?text=3" class="alt_text" alt="ううう">
</div>
</body>
</html>

javascript

test_4.js

$(function () {
  $('.myimage img').on({
    'mouseover':function () {
      var w=$(this).width();
      $(this).filter(function(){
        return $(this).closest('figure').length==0;
      }).wrap(
        $('<figure>').css({
          "display":"inline-block",
          "position":"relative",
          "margin":"0px"
        })
        );
      $(this).filter(function(){
        return $(this).next('figcaption').length==0;
      }).after(
        $('<figcaption>').css({
          "font-size":"0.7em",
          "position":"absolute",
          "bottom":"20px",
          "left":"0px",
          "color":"#ffffff",
          "background":"rgba(0,0,0,0.6)",
          "width":"100%",
          "max-width":w+"px",
          "padding":"1em 0px",
          "text-align":"center"
          }).text($(this).attr('alt'))
        );
    },
    'mouseout':function () {
      $(this).next('figcaption').remove();
      $(this).unwrap();
    },
  });
});