Overflow is shown mid css3 transition, how can I hide the overflow?

Question

I have the following structure:

<div class="service lorange">
    <div class="img"></div>
    <div class="title two-lines"><span>P-Accelerator for Start-Ups</span></div>
</div>

And the following CSS:

.service .img {
    transition: opacity 300ms;
}
.service:hover .img {
    opacity:0
}

.service has a rounded border (35px) and overflow: hidden;. This causes the inner .title to have its borders cut-off with its parent's borders (this is the expected behavior).

However, during the transition when hovering, and only mid-transition (since it starts and till it ends, not before or after it starts and finishes), the .title borders do not cut off for some reason.

Any idea what's going on? I've tried making a fiddle, but it doesn't reproduce the issue. What property can be causing this?

Edit: The fiddle in its shell does not reproduce the problem, but looking at the shell alone as a page does (I took the source of the iframe the fiddle uses)

Maciej A. Czyzewski · Accepted Answer · 2013-07-25 14:53:39Z

4

+150

My solution: (But I am looking for a better one.)

#services-grid .service .title {
   position: relative;
   z-index: 10;
   top: 130px;
   font-size: 13pt;
   text-align: center;
   height: 54px; /* IE fix */

   /* Add radius to bottom of .title */
   border-bottom-left-radius: 8px 15px;
   border-bottom-right-radius: 8px 15px;
}

JSFiddle: http://jsfiddle.net/KC4TH/4/

edited Jul 25, 2013 at 14:53

answered Jul 25, 2013 at 13:53

Maciej A. Czyzewski

1,5371 gold badge13 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

casraf Over a year ago

That's an interesting solution, I however wanted to avoid setting the border radius for the title itself as it would be sort of a workaround more than a fix, and it wouldn't really get the problem itself solved. I would've resorted to that had my deadline been arrived with no solution.

Yotam Omer · Accepted Answer · 2013-07-25 18:46:21Z

3

+300

The real reason this is happening is that browsers are only cropping the child element properly if it is not positioned (i.e. has position:static;). I've taken the liberty to alter your markup a bit and created a new jsFiddle which works as it should on Chrome, Firefox and IE10 (also working on IE9 but without the transition ofcourse).

Markup:

<div class="serviceContainer"> <!-- added a container -->
    <div class="service lorange">
        <!-- removed div.img -->
        <div class="title two-lines"><span>P-Accelerator for Start-Ups</span></div>
    </div>
</div>

CSS: (I've tried to include only the relevant CSS in the fiddle)

#services-grid .serviceContainer{ /* added a new container which the has the background image */
    background:url(http://foto.hrsstatic.com/fotos/0/3/256/256/80/FFFFFF/http%3A%2F%2Ffoto-origin.hrsstatic.com%2Ffoto%2F3%2F9%2F4%2F0%2F394033%2F394033_p_465430.jpg/zoKRL9Oq7JFnhFhhAn%2FfTQ%3D%3D/128,128/6/Catalonia_Yucatan_Beach-Quintana_Roo-Pool-394033.jpg) center center no-repeat;
    float:left;
    border-radius:35px;
    -moz-border-radius:35px;
    -webkit-border-radius:35px;
    -ms-border-radius:35px;
    margin:0 15px;
    overflow:hidden;
}

#services-grid .service.lorange .title span{ /* Give background color only to the span */
    background-color:#efbd00;
}

#services-grid .service.lorange:hover{ /* fade color to container only when hovered */
    background:#efbd00;
}

#services-grid .service .title {
    position:static; /* This is what's doing the trick */
    padding-top:130px; /* position the span using padding instead of position:absolute */
    font-size:13pt;
    text-align:center;
}

The "border-radius on the child" solution is only a cosmetic quickfix which can cause inconsistencies and it's also causing little bumps on each side because of the radius difference:

Weird bumps

edited Jul 25, 2013 at 18:46

answered Jul 25, 2013 at 16:36

Yotam Omer

15.4k11 gold badges65 silver badges65 bronze badges

4 Comments

Anil Over a year ago

+1 Excellent Answer!.. Actually found the underlying problem!

Yotam Omer Over a year ago

@JustAnil Thanks mate :) I've had trouble with this behaviour in the past so I really got to the bottom of it..

casraf Over a year ago

Good job! I will get to applying this fix in a few hours when I'm back home, and if this works you've earned the bounty fair and square.

casraf Over a year ago

I can only assign the bounty tomorrow. Rejoice though, you will receive a double bounty! I couldn't select 150 again

Collectives™ on Stack Overflow

Overflow is shown mid css3 transition, how can I hide the overflow?

2 Answers 2

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related