让一个孩子溢出它的祖父母的溢出：隐藏

Question

我想要一个孩子跨度溢出它的祖父母溢出：隐藏的规则。这是我的HTML代码：

<div class="ia-container">
    <figure>
        <img src="IMG/3.jpg" alt="image03" />
        <figcaption><span>Silent Serenity</span></figcaption>
    </figure>
</div>

这就是CSS代码：

.ia-container {
    width: 520px;
    height:420px;
    margin: 12px auto;
    overflow: hidden;
    position:relative;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}

.ia-container figure {
    position: absolute;
    top: 0;
    left: 92px; /* width of visible piece */
    width: 335px;
}

.ia-container > figure {
    position: relative;
    left: 0 !important;
}

.ia-container figcaption {
    width: 100%;
    height: 100%;
    background: rgba(87, 73, 81, 0.1);
    position: absolute;
    top: 0px;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.ia-container figcaption span {
    position: fixed;
    width: 300px;
    height:300px;
    top: 40%;
    left: -300px;
    background: rgba(87, 73, 81, 0.3);
}

我需要溢出：我的div中的隐藏规则。我希望跨度溢出ia-container div，但事实并非如此。我仍然被隐藏在div中。我做错了什么？或者有办法克服这个问题吗？！

这就是它的样子：

这就是我想要的：