A div css transition only goes one way and then forgets about it-CodePudding

So i have this div and I want to smoothly scale it on hover. Everything goes well and it gets bigger smoothly. After I move my mouse away, however, it just instantly returns to it's normal state without a smooth transition.

.dashboardInfoBox {
    width: 190px;
    display: flex;
    height: 120px;
    background-color: red;
    border-radius: 10px;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 7%), 0 4px 6px -2px rgb(0 0 0 / 5%);
    padding: 11px 17px;
    flex-direction: column;
    justify-content: space-around;
}
.dashboardInfoBox:hover {
    transform: scale(1.5);
    transition: 0.2s linear;
}

<div >
    test text
</div>

I have no idea how to force the transition to go both ways... Would appreciate any advice!enter code here

CodePudding user response：

You have to give the parent element dashboardInfoBoxthe transition property, that should fix the Problem :)

CodePudding user response：

Instead of having the transition in your hover state (.dashboardInfoBox:hover), move it into your regular class (.dashboardInfoBox).

What happens is that your transition works only when you're hovering over the element.

.dashboardInfoBox {
    width: 190px;
    display: flex;
    height: 120px;
    background-color: red;
    border-radius: 10px;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 7%), 0 4px 6px -2px rgb(0 0 0 / 5%);
    padding: 11px 17px;
    flex-direction: column;
    justify-content: space-around;
    transition: 0.2s linear;
}

.dashboardInfoBox:hover {
    transform: scale(1.5);
}