悬停中心文本上的图标题

在这个小提琴 http://jsfiddle.net/sLdhsbou/中，无论图像的大小如何，我都希望悬停时出现的"x"绝对居中。

另外，为什么当鼠标移动到图形之外时没有过渡，就像鼠标移入时一样？

<table border=1 style="width: 100%;">
    <TR><TD COLSPAN=6 STYLE="border-bottom: medium solid gray;">&nbsp;</TD></TR>
    <tr>
        <td class="left" style="width: 25%; background-color: cyan;">
            <table border=2 style="width: 100%;">
                <tr>
                    <td style="border: thin solid #ff9900;">
                        <div class="img-wrap">
                            <figure class="cap-bottom">
                                <img src="http://placehold.it/300x200" />
                                <figcaption>
                                   <div class="icon icon-image"></div>
                                </figcaption>
                            </figure>
                        </div>
                    </td>
                </tr>
            </table>
        </td>
        <td colspan=2 style="padding-top: 12px; padding-right: 12px;">
            <center><span style="font-size: 16px; font-weight: bold;">lorem ipsum</span></center>
            <br/>lorem ipsum dolor sit amet, prima brute at cum, ius tota fugit error te, eum an quod invidunt. an facer fierent iudicabit vix, pri at illud diceret probatus. maiorum ponderum omittantur te per, pri alterum propriae postulant at. ut pro nostro petentium salutandi.
            <p/>est dico stet quaeque no, ei eos dolores dignissim. mei dicunt indoctum deterruisset an, recteque moderatius eu nam. per praesent efficiantur ut, ad mel assum laoreet tincidunt. ad qui agam nullam causae, ut mei minim clita, ut movet verterem democritum est.
        </td>
    </tr>
    <TR><TD COLSPAN=6 STYLE="border-top: thin solid gray;">&nbsp;</TD></TR>
</table>

figure img{display:block}
figure
{
    display: block;
    position: relative;
    float: left;
    overflow: hidden;
    margin:0; padding:0
}
figcaption
{
    display: block;
    position: absolute;
    background: rgba(255,204,51,0.75);
    color: white;
    opacity: 0;
    -webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -o-transition: all .6s ease;
    transition: all .6s ease
}
figure:hover figcaption
{
    opacity: 1;
    width: 100%;
    height: 100%;
}
.cap-left figcaption{bottom:0;left:-100%}
.cap-left:hover figcaption{left:0}
.cap-right figcaption{bottom:0;right:-100%}
.cap-right:hover figcaption{right:0}
.cap-top figcaption{left:0;top:-100%}
.cap-top:hover figcaption{top:0}
.cap-bottom figcaption{left:0;bottom:-100%}
.cap-bottom:hover figcaption{bottom:0}
.icon { line-height: 1; }
.icon:link, .icon:visited, .icon:focus { color: #000; }
.icon-image
{
    position: absolute;
    top: 42%;
    left: 47%;
    font-size: 24px;
}
.icon-image:before{content: "x"}