https://codepen.io/jenny0515/pen/KKZKyaB
If you open the link above, you'll see that whichever cube I hover over, the one being hovered pauses and eases in to a bigger size while the others abruptly pause and become bigger as well. But what I've been trying to achieve is, while I hover on the cube which eases in, the others not being hovered on should ease-out. I don't think it's possible to achieve it in CSS but since I'm pretty much new at coding, maybe there is a chance? But if not, I'm fine using JS to try to overrun the cubes that are not being hovered on, so that they can shrink, or ease out, while the one being hovered on eases in, the latter without any help from JS, if possible.
Here's a preview of my HTML code, but please open the link above:
<div class="div">
<div class="circle">
<div class="stop-anim">
<div class="ease-in">
<div class="cube"><a href=""></a></div>
<div class="cube"><a href=""></a></div>
<div class="cube"><a href=""></a></div>
</div>
</div>
</div>
</div>
I made some attempts just using CSS but they didn't work.
No js needed here.
First of all define transitions for all the cubes, not only :hovered one. It will play only on properties change anyways:
.ease-in .cube{
transition: width 2s ease-in, height 2s ease-in;
}
Here I enum only properties that we gonna change with transition, not the animation.
Next, change the :hover target .cube props:
.ease-in .cube:hover{
width:100px;
height:100px;
}
And the rest cubes:
/* Selector takes cubes inside a hovered .ease-in, but those that are not hovered by themselves */
.ease-in:hover .cube:not(:hover){
width:15px;
height:15px;
}