I was playing around with jsfiddle when I came across a strange is
note: run snippet in full screen (isn't responsive yet)
$('.box').click(function () {
$('.box').toggleClass("init");
});html {
margin:0;
padding:0;
height:100vh;
background:#222;
color: cornflowerblue;
overflow-x:hidden;
font-size:18px;
}
.box {
height:100px;
width:100px;
background:rgba(0, 0, 0, 0.2);
position:absolute;
top:50%;
left:50%;
border-radius:50%;
overflow:hidden;
display:inline-block;
transition:all 1.4s 1.4s;
}
.minibox {
height:48%;
width:48%;
position:absolute;
background:gray;
transition:all 0.8s;
}
.box:hover .minibox {
transform:rotate(45deg);
}
.mini1 {
top:0;
left:0;
}
.mini2 {
top:0;
right:0;
}
.mini3 {
bottom:0;
left:0;
}
.mini4 {
bottom:0;
right:0;
}
.circ {
position:absolute;
height:80%;
width:80%;
top:10%;
left:10%;
border-radius:50%;
background:black;
line-height:80px;
text-align:center;
}
.box2 {
top:38%;
left:40%;
transition:all 0.8s 2s;
}
.box3 {
top:38%;
left:60%;
transition:all 0.8s 1.2s;
}
.box5 {
top:38%;
left:20%;
transition:all 0.8s 1.8s;
}
.box4 {
top:50%;
left:30%;
transition:all 0.8s 1.6s;
}
.box6 {
top:25%;
left:50%;
transition:all 0.8s 1s;
}
.box7 {
top:25%;
left:30%;
}
.init {
top:0;
left:0;
transition:all 0.5s
}
.init:before {
content:"Menu";
text-align:center;
line-height:80px;
background:red;
position:absolute;
z-index:8;
height:80%;
width:80%;
border-radius:50%;
top:10%;
left:10%;
background:blue;
}
.box:hover .minibox {
background:red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box init">
<div class="minibox mini1"></div>
<div class="minibox mini2"></div>
<div class="minibox mini3"></div>
<div class="minibox mini4"></div>
<div class="circ">4</div>
</div>
<div class="box box2 init">
<div class="minibox mini1"></div>
<div class="minibox mini2"></div>
<div class="minibox mini3"></div>
<div class="minibox mini4"></div>
<div class="circ">7</div>
</div>
<div class="box box3 init">
<div class="minibox mini1"></div>
<div class="minibox mini2"></div>
<div class="minibox mini3"></div>
<div class="minibox mini4"></div>
<div class="circ">3</div>
</div>
<div class="box box4 init">
<div class="minibox mini1"></div>
<div class="minibox mini2"></div>
<div class="minibox mini3"></div>
<div class="minibox mini4"></div>
<div class="circ">5</div>
</div>
<div class="box box5 init">
<div class="minibox mini1"></div>
<div class="minibox mini2"></div>
<div class="minibox mini3"></div>
<div class="minibox mini4"></div>
<div class="circ">6</div>
</div>
<div class="box box6 init">
<div class="minibox mini1"></div>
<div class="minibox mini2"></div>
<div class="minibox mini3"></div>
<div class="minibox mini4"></div>
<div class="circ">2</div>
</div>
<div class="box box7 init">
<div class="minibox mini1"></div>
<div class="minibox mini2"></div>
<div class="minibox mini3"></div>
<div class="minibox mini4"></div>
<div class="circ">1</div>
</div>The overflow which is set on the parent 'box' div isn't containing the 'minibox' divs - even though I have set overflow to hidden on the parent.
The Issue occurs with:
.minibox {
height:48%;
width:48%;
position:absolute;
background:gray;
transition:all 0.8s; <--this declaration
}
Removing this line makes it 'work' (obviously without the nice transition I was looking for), Although I'm at a slight loss as to why.
On hover, the div elements appear 'square' for around a second before 'doing what it should do' - that is, for then circle.
When it should appear like:
With a transition.
Any idea as to how this overflow can be resolved?
