CSS动画功能区 - 功能区位置

Question

JSFiddle：http://jsfiddle.net/jvtt8kgz/

HTML：

<div style="width: 99%; margin: 0; padding: 0; text-align: left; overflow: hidden;">
    <div style="width: 33%; float: left; overflow: hidden; text-align: center; margin: 15px 0 15px 0;">
        <div id="mPra" lang="is" class="mainHolder imgPra">
            <figure>
                <figcaption class="fig11">Group Profile</figcaption>
                <figcaption class="fig22">Edit</figcaption>
            </figure>
        </div>
    </div>
    <div style="width: 33%; float: left; overflow: hidden; text-align: center; margin: 15px 0 15px 0;">
        <div id="mPro" lang="is" class="mainHolder imgPro">
            <figure>
                <figcaption class="fig11">Provider Profile</figcaption>
                <figcaption class="fig22">Edit</figcaption>
            </figure>
        </div>
    </div>
    <div style="width: 33%; float: left; overflow: hidden; text-align: center; margin: 15px 0 15px 0;">
        <div id="mSit" lang="is" class="mainHolder imgSit">
            <figure>
                <figcaption class="fig11">Site Profile</figcaption>
                <figcaption class="fig22">Edit</figcaption>
            </figure>
        </div>
    </div>
    <br style="clear: both;" />
    <div style="width: 50%; float: left; overflow: hidden; text-align: center; margin: 15px 0 15px 0;">
        <div id="mCli" lang="is" class="mainHolder imgCli">
            <figure>
                <figcaption class="fig11">Client Profile</figcaption>
                <figcaption class="fig22">Edit</figcaption>
            </figure>
        </div>
    </div>
    <div style="width: 50%; float: left; overflow: hidden; text-align: center; margin: 15px 0 15px 0;">
        <div id="mAcc" lang="is" class="mainHolder imgAcc">
            <figure>
                <figcaption class="fig11">Accountable Party Profile</figcaption>
                <figcaption class="fig22">Edit</figcaption>
            </figure>
        </div>
    </div>
</div>

如何修改班级fig22的CSS，使其与班级fig11相对（左上角，以及与角落匹配的剪影）。

示例：

Answer 1

您需要将“mainHolder”下的“figure”元素的边距设置为0边距。

.mainHolder figure {
    width: 200px;
    height: 200px;
    overflow: hidden;
    position: relative;
    margin: 0;
}

然后您需要相应地调整色带的“左”值。

Answer 2

尝试从overflow: hidden移除.mainHolder figure，然后调整:hover的{​​{1}}，因此：

figcaption.fig22

Answer 3

非常简单：

1 -

.mainHolder figure {
    margin: 0; /* add this */
    padding: 0; /* add this */
}

2 -

.mainHolder figcaption.fig11 {
    left: -30px; /* change this */
    bottom: 30px; /* change this */
}
.mainHolder figure:hover figcaption.fig22 {
    left: -120px; /* change this */
    top: 30px; /* change this */
}

演示：http://jsfiddle.net/jvtt8kgz/3/