画像をhoverした際にフィルター色をかけたいのですが、アドバイス頂けたらと思います。

前提・実現したいこと

表示している画像全体に対してhover時に色(#ffffffcc)のついたフィルターをかけたい。
現状としては、画像に対して、円形の色のついたフィルターが出現する状態。

お忙しい中ではあると思いますが、アドバイスよろしくお願い致します。

発生している問題・エラーメッセージ

画像hover時に色のついたフィルターを出現させることは実現させることに成功したが、出現する形が円形である。

該当のソースコード

--- HTML ---
<section class="about">
      <div class="common__container">
        <h2 class="common__ttl">about</h2>
        <div class="about__inner">
          <div class="about__content common__filter">
            <img
              src="img/about/cafe.jpg"
              alt="about__cafe"
              class="about__img"
            />
            <p class="about__text">CAFE</p>
          </div>
          <div class="about__content common__filter">
            <img
              src="img/about/cosmatics.jpg"
              alt="about__cosmatics"
              class="about__img"
            />
            <p class="about__text">COSMATICS</p>
          </div>
--- HTML ---

--- scss ---
--- style.scss ---
@use 'import' as imp;

li {
  list-style-type: none;
}
a {
  text-decoration: none;
  color: #000;
}
.common {
  &__container {
    width: 1000px;
    margin: 0 auto;
    padding-top: 184px;
    padding-bottom: 184px;
  }
  &__ttl {
    font-family: imp.$main_font;
    font-size: 40px;
    font-weight: bold;
    letter-spacing: 2px;
    margin: 0;
    padding-bottom: 80px;
    text-transform: uppercase;
  }
  &__filter {
    position: relative;
    cursor: pointer;

    &::after {
      @include imp.filter;
    }
  }
}
.about {
  background-color: imp.$second_color;

  &__inner {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  &__content {
    width: 452px;
    height: 279px;
    margin-bottom: 96px;
    position: relative;
    cursor: pointer;
  }
  &__img {
    width: 100%;
    height: 100%;
  }
  &__text {
    position: absolute;
    top: 85%;
    left: 85%;
    transform: translate(-70%, -50%);
    color: #fff;
    letter-spacing: 2px;
    font-size: 32px;
  }
}
--- style.scss ---

--- _flex.scss ---
//mixinなど定義するファイル
@mixin filter {
  content: '';
  background-color: #ffffffcc;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.5;
  transition: 0.3s;
}
--- _flex.scss

--- _variable.scss ---
//変数を定義するためのファイル
$main_font: 'Outfit', sans-serif;
$second_color: #fffa;
--- _variable.scss ---

--- _import.scss ---
// 中継させるためのファイル
@forward 'variable';
@forward 'flex';
--- _import.scss
--- scss ---

--- css ---
li {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: #000;
}

.common__container {
  width: 1000px;
  margin: 0 auto;
  padding-top: 184px;
  padding-bottom: 184px;
}
.common__ttl {
  font-family: "Outfit", sans-serif;
  font-size: 40px;
  font-weight: bold;
  letter-spacing: 2px;
  margin: 0;
  padding-bottom: 80px;
  text-transform: uppercase;
}
.common__filter {
  position: relative;
  cursor: pointer;
}
.common__filter::after {
  content: "";
  background-color: #ffffffcc;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.5;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.about {
  background-color: #fffa;
}
.about__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.about__content {
  width: 452px;
  height: 279px;
  margin-bottom: 96px;
  position: relative;
  cursor: pointer;
}
.about__img {
  width: 100%;
  height: 100%;
}
.about__text {
  position: absolute;
  top: 85%;
  left: 85%;
  -webkit-transform: translate(-70%, -50%);
          transform: translate(-70%, -50%);
  color: #fff;
  letter-spacing: 2px;
  font-size: 32px;
}
--- css ---

試したこと

フィルターをかけたい画像about__imgの親要素(div class="about__content")に対して、クラスcommon__filterを追加した。そこで、position:relative;を記述、疑似要素として::afterの内容中に色を指定してまずは通常の状態でも色のついたフィルターをかけようとした。それができたらhover時にだけフィルターをかける予定。