javascript - 悬停中心文本上的图形标题

Question

在这个 fiddle 中 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"}

Answer 1

.cap-bottom:hover figcaption {
  top: 0;
}

.cap-bottom figcaption {
  left: 0;
  top: 100%;
  width: 100%;
  height: 100%;
}

如上更改您的 css :)

希望对你有帮助