Hovering Div Elements - html

Question

so i have a container div which holds 5 other divs (see picture ) and on hover those divs slide in the direction the arrow is pointed ( to right of picture ). I achieved this simply with CSS's :hover property. However, it achieved it's purpose but I simply just do not like the result ( see snippet ); certain mouse positions would cause the div to go back to the original position then back to hovered position again. Any ideas for improving the hover property? Picture
body, html {
padding: 0;
margin: 0;
}
.body-container {
position: fixed;
overflow : hidden;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-size: cover;
overflow: hidden;
}
.ele-containers {
width: 50%;
overflow: hidden;
height: 50%;
position: absolute;
transition: 0.6s;
background: blue;
border: 2px white solid;
}
#spring {
top: 0;
left: 0;
}
#summer {
top: 0;
left: 50%;
}
#winter {
top: 50%;
left: 0;
}
#autumn {
top: 50%;
left: 50%;
}
#spring:before, #summer:before, #winter:before, #autumn:before {
content: '';
position: absolute;
width: 200px;
height: 200px;
background: white;
border-radius: 50%;
}
#spring:hover {
left: -10%;
top:-10%;
}
#winter:hover{
left:-15%;
top:65%;
}
#autumn:hover{
left:65%;
top:65%;
}
#summer:hover {
left: 65%;
top:-15%;
}
#spring:before {
bottom: -100px;
right: -100px;
}
#summer:before {
bottom: -100px;
left: -100px;
}
#winter:before {
top: -100px;
right: -100px;
}
#autumn:before {
top: -100px;
left: -100px;
}
#about-circle {
position: absolute;
border-radius: 100%;
transform: translate(-50%, -50%);
display: flex;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
background: linear-gradient(rgb(244, 217, 193), rgb(204, 230, 255));
border: solid 4px rgba(255, 255, 255, .5);
}
<div class="body-container">
<div class="ele-containers" id="spring">Spring</div>
<div class="ele-containers" id="summer">Summer</div>
<div class="ele-containers" id="winter">Winter</div>
<div class="ele-containers" id="autumn">Autumn</div>
<div class="circle-container" id="about-circle"></div>
</div>

Answer 1

Instead of moving the main div, you create pseudo elements and move them.
When done like that, it will solve the hover issue.
Note, you might need to adjust the movement a little, I just made them up to show how-to
body,
html {
padding: 0;
margin: 0;
}
.body-container {
position: fixed;
overflow: hidden;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-size: cover;
overflow: hidden;
}
.ele-containers {
width: 50%;
overflow: hidden;
height: 50%;
position: absolute;
}
#spring {
top: 0;
left: 0;
}
#summer {
top: 0;
left: 50%;
}
#winter {
top: 50%;
left: 0;
}
#autumn {
top: 50%;
left: 50%;
}
#spring:before,
#summer:before,
#winter:before,
#autumn:before {
content: '';
position: absolute;
width: 200px;
height: 200px;
background: white;
transition: 0.6s;
border-radius: 50%;
transform-origin: left top;
}
#spring:before {
left: calc(100% - 100px);
top: calc(100% - 100px);
}
#summer:before {
top: calc(100% - 100px);
left: -100px;
}
#winter:before {
top: -100px;
left: calc(100% - 100px);
}
#autumn:before {
top: -100px;
left: -100px;
}
#spring:after,
#summer:after,
#winter:after,
#autumn:after {
content: '';
left: 0;
top: 0;
width: 100%;
height: 100%;
position: absolute;
transition: 0.6s;
background: blue;
border: 2px white solid;
transform-origin: left top;
z-index: -1;
}
#about-circle {
position: absolute;
border-radius: 100%;
transform: translate(-50%, -50%);
display: flex;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
background: linear-gradient(rgb(244, 217, 193), rgb(204, 230, 255));
border: solid 4px rgba(255, 255, 255, .5);
}
#spring:hover::before,
#spring:hover::after {
transform: translate(-30%,-15%);
}
#winter:hover::before,
#winter:hover::after {
transform: translate(-15%,30%);
}
#autumn:hover::before,
#autumn:hover::after {
transform: translate(30%,15%);
}
#summer:hover::before,
#summer:hover::after {
transform: translate(30%,-15%);
}
<div class="body-container">
<div class="ele-containers" id="spring">Spring</div>
<div class="ele-containers" id="summer">Summer</div>
<div class="ele-containers" id="winter">Winter</div>
<div class="ele-containers" id="autumn">Autumn</div>
<div class="circle-container" id="about-circle"></div>
</div>