let a child to overflow it's grandparent's overflow:hidden - html

Question

I want a child span to overflow it's grandparents overflow:hidden rule. This is my HTML code:
<div class="ia-container">
<figure>
<img src="IMG/3.jpg" alt="image03" />
<figcaption><span>Silent Serenity</span></figcaption>
</figure>
</div>
and this id the CSS code:
.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);
}
I need that overflow:hidden rule in my div. I want the span to overflow ia-container div, but it doesn't. I still keeps being hidden inside the div. What am I doing wrong about it? or is there a way to overcome this problem?!
This is what it looks like:
and this is what I want to have: