JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://nelog.jp/wp-content/themes/simplicity-child-nelog/style.css">
<div id="the-content" class="entry-content">
<div class="eye-catch">
<img title="" src="http://nelog.jp/wp-content/uploads/2015/11/b150c72a-bebb-4804-a756-3892321cc976.png" alt="寝ログの画像をパクってます" height="313" width="680">
</div>
</div>
CSS
.eye-catch {
position: relative;
padding: 0;
margin: 0;
}
.eye-catch img {
display: block;
}
.eye-catch .eye-caption {
position: absolute;
bottom: 0;
right: 0;
font-size: 12px;
background-color: #000;
padding: 0 5px;
color: #fff;
font-style: italic;
}
JavaScript
(function ($) {
$(function () {
var caption = $(".eye-catch img").attr("alt");
$(".eye-catch").append("<div class='eye-caption'>" + caption + "</div>");
});
})(jQuery);