Move frame off the edges of the picture-CodePudding

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

<div class="article-block">
   <div class="article-block__img-wrapper">
      <span>
         <img class="block-img" src="{{ $article_block->main_image }}" alt="" title="">
      </span>
   </div>
</div>

article-block__img-wrapper {
    position: relative;

    span {
      position: relative;
      display: inline-block;

      &::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;
      }
    }

    &:hover {
      span::before {
        opacity: 1;
      }
    }
  }

CodePudding user response：

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;
    }
  }
}