ホバーするとSPの画面だけ表示が崩れる（画像が重なる）

Question

文字枠をホバーすると対応して画像が切り替わるのですが、SP画面の一番上（ノーズワイヤー）のところだけデフォルトの画像が重なります。枠の真ん中だと大丈夫なのですが、上辺に近づくと枠がブルブルゆれたり、デフォの画像と重なったりします。PCは大丈夫です。
jqueryはSPとPCで書き分けたりしていないので、CSSなのかなと思うのですが見つけられずにいます。お力をいただければと思います。よろしくお願いします。

<div class="mask">
		<img src="./img/FEATURE/pc/mask_img1.png" alt="mask" class="mask_0 mask_img">
		<img src="./img/FEATURE/pc/mask_1.png" alt="mask" class="mask_1 mask_img">
		<img src="./img/FEATURE/pc/mask_2.png" alt="mask" class="mask_2 mask_img">
		<img src="./img/FEATURE/pc/mask_2.png" alt="mask" class="mask_3 mask_img">
		<img src="./img/FEATURE/pc/mask_2.png" alt="mask" class="mask_4 mask_img">
		<img src="./img/FEATURE/pc/short_Arrow1.png" alt="mask" class="mask_5 mask_img">
		<img src="./img/FEATURE/pc/long_Arrow.png" alt="mask" class="mask_6 mask_img">
		<img src="./img/FEATURE/pc/short_Arrow2.png" alt="mask" class="mask_7 mask_img">
	
		<img src="img/FEATURE/nosewire.png" alt="" class="image_0"> 
		<img src="img/FEATURE/variation.png" alt="" class="image_01"> 
		<img src="img/FEATURE/softfilter.png" alt="" class="image_02"> 
		<img src="img/FEATURE/strings.png" alt="" class="image_03"> 
		<img src="img/FEATURE/nonwoven.png" alt="" class="image_04"> 
		
	</div>

	<section class="feature">
		<ul class="feature_list">
			<li class="list_item item_0">
				<p class="text_top">ノーズワイヤー</p>
				<p class="text_bottom">鼻から頬周り全方位フィット</p>
			</li>
			<li class="list_item item_01">
				<p class="text_top">豊富なバリエーション</p>
				<p class="text_bottom">様々なシチュエーションで選べる</p>
			</li>
			<li class="list_item item_02">
				<p class="text_top">ソフトフィルター</p>
				<p class="text_bottom">肌ざわりがやさしい</p>
			</li>
		</ul>
		<ul class="feature_list">
			<li class="list_item_02 item_03">
				<p class="text_top">柔らかく平らなゴム紐</p>
				<p class="text_bottom">長時間の使用でも耳が痛くなりにくい</p>
			</li>
			<li class="list_item_02 item_04">
				<p class="text_top">高感度フィルターの不織布</p>
				<p class="text_bottom text_bottom_sp">花粉／ウイルス飛沫／PM2.5／黄砂　99％カット*</p>
			</li>
		</ul>
/section>
		
.mask {
  margin-top: 180px;
  margin-bottom: 135px;
  margin-right: auto;
  margin-left: auto;
  height: 300px;
  width: 960px;
  position: relative;

  .mask_0 {
    display: inline-block;
    opacity: 0;
    width: 195px;
    position: absolute;
    top: -10%;
    left: 0;
  }

  .mask_1 {
    display: inline-block;
    opacity: 0;
    width: 320px;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 16%;
  }

  .mask_2 {
    display: inline-block;
    opacity: 0;
    width: 187px;
    z-index: -2;
    position: absolute;
    top: 0;
    left: 33%;
  }

  .mask_3 {
    display: inline-block;
    opacity: 0;
    width: 187px;
    z-index: -3;
    position: absolute;
    top: 0;
    left: 45%;
  }

  .mask_4 {
    display: inline-block;
    opacity: 0;
    width: 187px;
    z-index: -4;
    position: absolute;
    top: 0;
    left: 57%;
  }

  .mask_5 {
    display: inline-block;
    opacity: 0;
    width: 91px;
    z-index: -5;
    position: absolute;
    top: 8%;
    left: 67%;
  }

  .mask_6 {
    display: inline-block;
    opacity: 0;
    width: 650px;
    z-index: -5;
    position: absolute;
    top: 0;
    right: 15%
  }

  .mask_7 {
    display: inline-block;
    opacity: 0;
    width: 85px;
    z-index: -5;
    position: absolute;
    top: 20%;
    left: 76%;
  }
}

.mask {
  .mask_0.active {
    animation: mask 1.5s ease;
    animation-fill-mode: forwards;
  }

  .mask_1.active {
    animation: mask 1.5s ease .3s;
    animation-fill-mode: forwards;
  }

  .mask_2.active {
    animation: mask 1.5s ease .5s;
    animation-fill-mode: forwards;
  }

  .mask_3.active {
    animation: mask 1.5s ease .7s;
    animation-fill-mode: forwards;
  }

  .mask_4.active {
    animation: mask 1.5s ease .9s;
    animation-fill-mode: forwards;
  }

  .mask_5.active {
    animation: mask_02 1.5s ease 1.5s;
    animation-fill-mode: forwards;
  }

  .mask_6.active {
    animation: mask_02 1.5s ease 1.5s;
    animation-fill-mode: forwards;
  }

  .mask_7.active {
    animation: mask_02 1.5s ease 1.5s;
    animation-fill-mode: forwards;
  }
}

@keyframes mask {
  from {
    opacity: 0;
    transform: translateX(30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes mask_02 {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@include mq("m") {
  .mask {
    width: 760px;

    .mask_0 {
      left: -8%;
    }

    .mask_1 {
      left: 12%;
    }

    .mask_3 {
      left: 47%;
    }

    .mask_4 {
      left: 59%;
    }

    .mask_6 {
      right: 10%;
    }

    .mask_7 {
      left: 78%;
    }
  }
}

@include mq("s") {
  .mask {
    margin-top: 15.6vw;
    margin-bottom: 14.3vw;
    height: 39vw;
    width: 100%;

    .mask_0 {
      width: 25.4vw;
      top: -5%;
      left: -5%;
    }

    .mask_1 {
      width: 41.7vw;
      left: 14%;
    }

    .mask_2 {
      width: 24.4vw;
      left: 35%;
    }

    .mask_3 {
      width: 24.4vw;
      left: 47%;
    }

    .mask_4 {
      width: 24.4vw;
      left: 59%;
    }

    .mask_5 {
      width: 11.9vw;
      top: 2%;
      left: 70%;
    }

    .mask_6 {
      width: 84.7vw;
      top: 0;
      right: 8%
    }

    .mask_7 {
      width: 11vw;
      top: 16%;
      left: 81%;
    }
  }
}

@include mq("xs") {
  .mask {
    .mask_7 {
      top: 11%;
    }
  }
}

.image_0,
.image_01,
.image_02,
.image_03,
.image_04 {
  // border: 1px solid #000;
  height: 400px;
  object-fit: contain;
  position: absolute;
  top: -60px;
  left: -4%;
  display: none;
}



.feature {
  margin-top: 85px;
  margin-bottom: 135px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;

  &_list {
    display: flex;
    justify-content: center;
    margin-bottom: 21px;

    .list_item {
      flex: 1;
      max-width: 225px;
      height: auto;
      border: 1px solid #707070;
      padding: 20px;
      margin-right: 37px;
      line-height: 1.0;
      &:first-child {
				border: 1px solid #707070;
			}
      &:first-child:hover {
				border: 4px solid #707070;
			}
      &:last-child {
        margin-right: 0;
      }

      @include fs(12);

      .text_top {
        padding-bottom: 18px;
        border-bottom: 1px solid #000;
      }

      .text_bottom {
        padding-top: 20px;
      }
    }

    .list_item_02 {
      @extend .list_item;
      max-width: 357px;
      &:first-child {
				border: 1px solid #707070;
			}
      &:last-child {
        margin-right: 0;
      }
    }
  }

  .list_item:hover,
  .list_item_02:hover {
    border: 4px solid #707070;
  }

  &_notes {
    margin-bottom: 30px;
    padding: 0 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    .note {
      padding-bottom: 10px;
      padding-right: 20px;
      @include fs(10);

      &:last-child {
        padding-right: 0;
      }
    }
  }

  .caution {
    @include fs(13);
  }
}

@include mq("s") {
	.feature {
		margin-top: 65px;
		margin-bottom: 100px;

		&_list {
			display: block;
			.list_item {
				margin-right: auto;
				margin-left: auto;
				width: 85%;
				max-width: 580px;
				height: auto;
				border: 1px solid #707070;
				padding: 20px;
				margin-bottom: 18px;
				line-height: 1.0;
				@include fs(22);
				&:last-child {
					margin-right: auto;
				}
				.text_top {
					padding-bottom: 10px;
					border-bottom: 2px solid #707070;
				}
				.text_bottom {
					padding-top: 12px;
				}
			}

			.list_item_02 {
				&:first-child {
					border: 1px solid #707070;
				}
				.text_bottom_sp {
					@include fs(21);
					letter-spacing: -2px;
				}
			}
		}

		&_notes {
			width: 95%;
			max-width: 580px;
			margin-bottom: 62px;
			display: block;
			margin-left: 8%;
			text-align: left;
			.note {
				padding-bottom: 10px;
				padding-right: 0;
				font-size: 2.61vw;
				line-height: 1.2;
			}
		}
		.caution {
			@include fs(20);
			line-height: 1.1;
			padding: 0 30px;
		}
	}
}

@include mq("xs") {
	.feature {
		&_list {
			.list_item {
				font-size: 3.82vw;
			}
			.list_item_02 {
				.text_bottom_sp {
					font-size: 3.65vw;
				}
			}
		}
		.caution {
			font-size: 2.8vw;
		}
	}
}


$(function () {
    $('.item_0').hover(function () {
        $('.mask_img').hide();
        $('.image_0').fadeIn();
    }, function () {
        $('.mask_img').show();
        $('.image_0').hide();
    });
    $('.item_01').hover(function () {
        $('.mask_img').hide();
        $('.image_01').fadeIn();
    }, function () {
        $('.mask_img').show();
        $('.image_01').hide();
    });
    $('.item_02').hover(function () {
        $('.mask_img').hide();
        $('.image_02').fadeIn();
    }, function () {
        $('.mask_img').show();
        $('.image_02').hide();
    });
    $('.item_03').hover(function () {
        $('.mask_img').hide();
        $('.image_03').fadeIn();
    }, function () {
        $('.mask_img').show();
        $('.image_03').hide();
    });
    $('.item_04').hover(function () {
        $('.mask_img').hide();
        $('.image_04').fadeIn();
    }, function () {
        $('.mask_img').show();
        $('.image_04').hide();
    });
});
ここに言語を入力
コード

Comments

[1T2R3M4]

https://ja.stackoverflow.com/questions/82295

以下ご対応ください。
https://teratail.com/help#posted-otherservice

[bbtdp027]

遅くなりましてすみません。そうなんですね、同じ質問をしてはいけないんですね。知りませんでした。

Answer 1

元の画像とホバーの画像のサイズと位置のせいでした、、。調整したら直りました。