画像がhoverされた時に周りに色をつけたい

下記の画像のようにhoverされた時にimgタグの周りに色をつけたいです。
imgタグをspanタグで囲んで色をつけてみたのですが、spanタグの真ん中にimgが配置されず、またwidthとheightでhoverされた時に色を付ける大きさ記述したらその分、左右にずれてしまい、spanタグの真ん中にimgタグをうまく配置することができません。
画像に周りに色をつけるときはどのように実装したらいいのでしょうか？

 return (
    <div className="padding-16 flex gap-5 flex-container">
        <img src={img} />
      <div className="flex flex-direction gridgap-5">
        <p>
          {name}
        </p>
        <p>
          {age}
        </p>
      </div>
      <span className="hover">
        <img src="img/dot.svg" />
      </span>
    </div>
)

  //style.scss
div,
span,
img {
  &.padding-16 {
    padding: 16px;
  }
  &.flex {
    display: flex;
  }
  &.flex-direction {
    flex-direction: column;
  }
  .flex-container > :last-child {
    margin-left: auto;
  }
  &.gap-5 {
    gap: 5px;
  }
  &.hover {
    display: inline-block;
    &:hover {
      height: 24px;
      background-color: blue;
      transition-duration: 0.3s;
      transition-property: background-color, box-shadow;
      border-radius: 50%;
    }
  }
}

行動規範の内容に同意します

回答1件

ベストアンサー

:hoverする前にサイズや背景色のスタイル、アニメーションの設定をしておいて、
:hoverには変化するスタイルのみ設定してください。

あとspanの真ん中に画像を配置するにはFlexBoxを使うといいでしょう。

css
1div,
2span,
3img {
4  &.padding-16 {
5    padding: 16px;
6  }
7  &.flex {
8    display: flex;
9  }
10  &.flex-direction {
11    flex-direction: column;
12  }
13  .flex-container > :last-child {
14    margin-left: auto;
15  }
16  &.gap-5 {
17    gap: 5px;
18  }
19  &.hover {
20    display: inline-flex;
21    justify-content: center;
22    align-items: center;
23    height: 100px;
24    width: 100px;
25    border-radius: 50%;
26    background-color: rgba(255,255,255,0);
27    transition-property: background-color, box-shadow;
28    transition-duration: 0.3s;
29    &:hover {
30      background-color: blue;
31      box-shadow: 5px 5px 5px rgba(0,0,0,0.3);    }
32  }
33}