Move frame off the edges of the picture - html

Question

I have pictures on a page, and when I hover over them, a blue border appears
But this frame appears abruptly, but I would like it to gradually shrink from the edges of the picture and stand in the same place, can I do this?
Here are my styles
.article-block__img-wrapper {
position: relative;
}
.article-block__img-wrapper span {
position: relative;
display: inline-block;
}
.article-block__img-wrapper span::before {
display: block;
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
transition: 0.2s ease-in-out;
outline: 1px solid #4F8EFF;
outline-offset: -10px;
opacity: 0;
}
.article-block__img-wrapper:hover span::before {
opacity: 1;
}
<div class="article-block">
<div class="article-block__img-wrapper">
<span>
<img class="block-img" src="https://via.placeholder.com/500" alt="" title="">
</span>
</div>
</div>

Answer 1

The simplest way would be to expand on your current animation using transition.
transition: opacity 0.2s ease-in-out, outline-offset 0.2s ease-in-out;
You can edit the timing/easing independently for each style.
Then apply outline-offset: -10px; inside your hover styles.
Functional Codepen example of the below code (Since I don't think Stack snippets support LESS) available here.
<div class="article-block">
<div class="article-block__img-wrapper">
<span>
<img class="block-img" src="https://picsum.photos/300" alt="" title="">
</span>
</div>
</div>
.article-block__img-wrapper {
position: relative;
display: inline-block;
span {
position: relative;
display: inline-block;
&::before {
display: block;
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
transition: opacity 0.2s ease-in-out, outline-offset 0.2s ease-in-out;
outline: 1px solid #4f8eff;
outline-offset: 0;
opacity: 0;
}
}
&:hover {
span::before {
opacity: 1;
outline-offset: -10px;
}
}
}