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

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:

enter image description here

and this is what I want to have:

enter image description here

This is the default behaviour. What are you trying to achieve? — Paulie_D, Jan 26 '15 at 17:02
Probably not possible....what "look" are you trying to achieve.? If you have a design image we might be able to offer alternative solutions. — Paulie_D, Jan 26 '15 at 17:05
This might be helpful: http://stackoverflow.com/questions/3387489/make-child-visible-outside-an-overflowhidden-parent — Jack, Jan 26 '15 at 17:11
Now I'm curious as to why the "overflow" on the grandparent is so important. — Paulie_D, Jan 26 '15 at 17:16
@Paulie_D I changed the images. and this is why I want the "overflow:hidden" for my grandparent div — Afshin, Jan 26 '15 at 17:22
@Afshin try removing the overflow from where you have it now, wrap image in div set to 100% width and height and applying overflow to that div. This will probably not work, but because we are not aware of yor exact code and stuff, its the best help you can get. In short, you cannot overflow element inside hidden overflow element, thats the way specs are. — Tomas, Jan 26 '15 at 17:45

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

0 Answers0