1

I've created this fiddle. I'm sure you'll see my problem.

jsfiddle.net/vnbS3/

The box that pops up decides that it will not do the same on mouseout. I have tried a lot of things, and i don't think it is because of the z-index.

I think it is due to the transition on the .background, as i had to put a transition-delay to stop it messing up. However, the delay will not work on mouseout.

JonKaric
  • 23
  • 5
  • Read [my answer on another question](http://stackoverflow.com/questions/17809923/overflow-is-shown-mid-css3-transition-how-can-i-hide-the-overflow/17863806#17863806). It covers the same case – Yotam Omer Aug 25 '13 at 22:28
  • I've read it, but i don't think the same applies. If you could replicate it in a fiddle, that would be awesome. – JonKaric Aug 25 '13 at 23:38
  • 1
    First - please post relevant code here and don't get around the rules with the non-live link. Second - don't be sure that others will see what the problem is - **DESCRIBE* your problem so that others can understand what you are expecting and what is going wrong. That also helps others searching for similar problems find this post and any answers it might have. – dc5 Aug 26 '13 at 02:09
  • Perhaps this post will help: [Webkit not respecting overflow:hidden with border radius](http://stackoverflow.com/questions/10314207/webkit-not-respecting-overflowhidden-with-border-radius) – dc5 Aug 26 '13 at 02:46
  • Unfortunately, it's not helped. – JonKaric Aug 27 '13 at 18:04

2 Answers2

0

get rid of your ease transition in background it's causing it to have that weird popup delay.

fiddle: http://jsfiddle.net/vnbS3/3/

.background {
    position: absolute;
    z-index: 1;
    width:100%;
    height:100%;
    border-radius: 999px;
    overflow: hidden;
}
benny
  • 454
  • 2
  • 7
  • 16
0

Simply add an !important tag to the your .background div's overflow:hidden attribute

Here

http://jsfiddle.net/vnbS3/4/

Shakey
  • 89
  • 1
  • 7
  • This doesn't work. You have added !important AFTER the semi-colon, making the next line not work. This is the line that makes the background rotate. – JonKaric Aug 25 '13 at 22:52
  • My bad! It's 4.00 in the morning! Anyways, if you're dead on with the transition, you will have to utilize a sibling selection - move the transitions away to a seperate subdiv and use a sibling selector to animate the hover takes place. – Shakey Aug 25 '13 at 23:16
  • I don't understand what you mean, sorry. – JonKaric Aug 25 '13 at 23:38