Something goes wrong when I unhover the div - html

Question

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 class="box-link article-1">
<a class="article-title">The ultimate guide to Australian native flowers</a>
<a class="article-desc">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>

Answer 1

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 class="box-link article-1">
<a class="article-title">The ultimate guide to Australian native flowers</a>
<a class="article-desc">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.