画像サイズに合わせて吹き出しを表示
画像幅と吹き出し幅から真ん中を抽出し、吹き出しを表示
jQuery
$(function () {
$('div.image').hover(function() {
var img_width = $(this).children('img').width();
var arrow_width = $(this).children('span').outerWidth();
// （画像幅 - 吹き出し幅） / 2 = 真ん中
var posi_width = (img_width - arrow_width) / 2;
$(this).children('span').css('left', posi_width).fadeIn('fast');
}, function() {
$(this).children('span').fadeOut('slow');
});
});
CSS
.image {
display: inline-block;
position: relative;
top: 60px;
}
.arrow_box {
display: none;
z-index: 1;
position: absolute;
top: -55px;
padding: 16px;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
background: #333;
color: #fff;
white-space: nowrap;
}
.arrow_box:after {
position: absolute;
top: 100%;
left: 50%;
width: 0;
height: 0;
margin-left: -10px;
border: solid transparent;
border-color: rgba(51, 51, 51, 0);
border-top-color: #333;
border-width: 10px;
pointer-events: none;
content: " ";
}
HTML
<div class="image">
<img src="/img/thumb.jpg">
<span class="summary">88px × 62px</span>
</div>
サンプル
