Something goes wrong when I unhover the div-CodePudding

I'm trying to change the text on hover, it works, but I'm wondering why the text goes to the right when you unhover the div.

I want to make the same effect when you unhover the div. Is it because the position absolute? I'm pretty new to web development.

.article-title {
    opacity: 1;
    width: 24%;
    position: absolute;
    padding-bottom: 10px;
    color: #ff0099;
    font-size: 30px;
    transition: all .5s ease-in-out, width 0s linear, absolute 0s linear;
}

.article-desc {
    width: 23%;
    position: absolute;
    opacity: 0;
    transition: all .5s ease-in-out, width 0s linear, absolute 0s linear;
}

.box-link {
    display: flex;
    flex-direction: column;
    padding: 10px;
    border: 2px solid black;
    border-radius: 10px;
    height: 200px;
    width: 25%;
    text-align: center;
    cursor: pointer;
    transition: transform .5s, box-shadow .2s;
}

.box-link:hover {
    transform: scale(1.15);
    box-shadow: 0 0 51px rgba(33, 33, 33, .4);
}

.box-link:hover .article-title {
    width: 89%;
    position: absolute;
    opacity: 0;
}

.box-link:hover .article-desc {
    width: 95%;
    opacity: 1;
}

<div >
    <a >The ultimate guide to Australian native flowers</a>
    <a >Looking to add a touch of Australiana when building a bouquet or growing your garden? There are so many stunning Australian native flowers to choose from.</a>
</div>

CodePudding user response：

Change your CSS to :

.article-title {
    opacity: 1;
    position: absolute;
    padding-bottom: 10px;
    color: #ff0099;
    font-size: 30px;
    transition: all .5s ease-in-out, width 0s linear, absolute 0s linear;
}

.article-desc {
    position: absolute;
    opacity: 0;
    transition: all .5s ease-in-out, width 0s linear, absolute 0s linear;
}

.box-link {
    display: flex;
    flex-direction: column;
    padding: 10px;
    border: 2px solid black;
    border-radius: 10px;
    height: 200px;
    width: 25%;
    text-align: center;
    cursor: pointer;
    transition: transform .5s, box-shadow .2s;
  position: relative;
}

.box-link:hover {
    transform: scale(1.15);
    box-shadow: 0 0 51px rgba(33, 33, 33, .4);
}

.box-link:hover .article-title {
    position: absolute;
    opacity: 0;
}

.box-link:hover .article-desc {
    opacity: 1;
}

<div >
                <a >The ultimate guide to Australian native flowers</a>
                <a >Looking to add a touch of Australiana when building a bouquet or growing your garden? There are so
                    many stunning Australian native flowers to choose from.</a>
            </div>

The idea is to make the parent position relative so that you no longer need width explicitly to containerize the childs.