文字枠をホバーすると対応して画像が切り替わるのですが、SP画面の一番上(ノーズワイヤー)のところだけデフォルトの画像が重なります。枠の真ん中だと大丈夫なのですが、上辺に近づくと枠がブルブルゆれたり、デフォルトの画像と重なったりします。PCは大丈夫です。
jqueryはSPとPCで書き分けたりしていないので、CSSなのかなと思うのですが見つけられずにいます。お力をいただければと思います。よろしくお願いします。
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- Basic Page Needs
---------------------------------------------------->
<meta charset="utf-8">
<title>MASCODE FEATURE</title>
<!-- Mobile Specific Metas
--------------------------------------------------->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS
---------------------------------------------------->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/feature.css">
<!-- jQuery
---------------------------------------------------->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<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>
<ul class="feature_notes">
<li class="note">*PFE:平均99%(約0.1μm微小粒子捕集効率試験)※1</li>
<li class="note">*BFE:平均99%(バクテリア飛沫捕集効率試験)※1</li>
<li class="note">*VFE:平均99%(ウイルス飛沫捕集効率試験)※1</li>
<li class="note">※1試験機関:米国ネルソン研究所</li>
</ul>
<p class="caution">※マスクは感染(侵入)を完全に防ぐものではありません。</p>
</section>
<div class="scroll scroll_sp">
</div>
<section class="color">
<p class="color_text">チークのように血色感を良く見せる<br class="s_block">肌なじみの良いカラーで、<br>まるでメイクをしているような華やかさや<br class="s_block">明るい印象を引き出すカラーシリーズ。<br>なりたいイメージに合わせて選ぶことが可能。</p>
<div class="color_list pc_img">
<img src="./img/top/pc/M_img.jpg" alt="Msize" class="pc_img">
<img src="./img/top/pc/M_img.jpg" alt="Msize" class="pc_img">
<img src="./img/top/pc/M_img.jpg" alt="Msize" class="pc_img">
</div>
<div class="color_list sp_img">
<img src="./img/top/sp/M_img_sp.jpg" alt="Msize" class="sp_img">
<img src="./img/top/sp/M_img_sp.jpg" alt="Msize" class="sp_img">
<img src="./img/top/sp/M_img_sp.jpg" alt="Msize" class="sp_img">
</div>
</section>
<footer>
<div class="container">
<div class="footer_flex">
<a href="#" class="footer_logo"><img src="./img/top/footer_logo.png" alt="mascode"></a>
<div class="footer_pc">
<div class="footer_link">
<ul class="link_box">
<li class="link_item"><a href="#">INSTAGRAM</a></li>
<li class="link_item"><a href="#">FACEBOOK</a></li>
<li class="link_item"><a href="#">TWITTER</a></li>
</ul>
<ul class="link_box">
<li class="link_item"><a href="#">CONTACT US</a></li>
<li class="link_item"><a href="#">COMPANY</a></li>
</ul>
<ul class="link_box">
<li class="link_item"><a href="#">PRIVACY POLICY</a></li>
<li class="link_item"><a href="#">特定商取引法</a></li>
</ul>
</div>
</div>
<div class="footer_sp">
<div class="footer_link">
<ul class="link_box">
<li class="link_item"><a href="#">CONTACT US</a></li>
<li class="link_item"><a href="#">COMPANY</a></li>
<li class="link_item"><a href="#">PRIVACY POLICY</a></li>
<li class="link_item"><a href="#">特定商取引法</a></li>
</ul>
<ul class="link_box">
<li class="link_item"><a href="#">INSTAGRAM</a></li>
<li class="link_item"><a href="#">FACEBOOK</a></li>
<li class="link_item"><a href="#">TWITTER</a></li>
</ul>
</div>
</div>
</div>
<small>COPYRIGHT © ALL RIGHTS RESERVED.</small>
</div>
</footer>
</body>
</html>
@charset "UTF-8";
.container {
margin: 0 auto;
max-width: 1200px;
}
@media screen and (max-width: 767px) {
.container {
max-width: 540px;
}
}
@media screen and (max-width: 991px) {
.container {
max-width: 720px;
}
}
@media screen and (max-width: 1199px) {
.container {
max-width: 960px;
}
}
/****************************************
Custom
*****************************************/
body {
color: #000;
font-family: "Helvetica Neue", "sans-serif";
font-size: 12px;
font-size: 0.75rem;
line-height: 14px;
background-color: #fff;
position: relative;
overflow: hidden;
}
a:active,
a:hover,
a:link,
a:visited {
color: #313131;
}
a:hover {
opacity: 0.7;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.fadein {
opacity: 0;
-webkit-transition: all 2s;
transition: all 2s;
}
.fadein.active {
opacity: 1;
}
/****************************************
FEATURE page
*****************************************/
.mask {
margin-top: 180px;
margin-bottom: 135px;
margin-right: auto;
margin-left: auto;
height: 300px;
width: 960px;
position: relative;
}
.mask .mask_0 {
display: inline-block;
opacity: 0;
width: 195px;
position: absolute;
top: -10%;
left: 0;
}
.mask .mask_1 {
display: inline-block;
opacity: 0;
width: 320px;
z-index: 1;
position: absolute;
top: 0;
left: 16%;
}
.mask .mask_2 {
display: inline-block;
opacity: 0;
width: 187px;
z-index: -2;
position: absolute;
top: 0;
left: 33%;
}
.mask .mask_3 {
display: inline-block;
opacity: 0;
width: 187px;
z-index: -3;
position: absolute;
top: 0;
left: 45%;
}
.mask .mask_4 {
display: inline-block;
opacity: 0;
width: 187px;
z-index: -4;
position: absolute;
top: 0;
left: 57%;
}
.mask .mask_5 {
display: inline-block;
opacity: 0;
width: 91px;
z-index: -5;
position: absolute;
top: 8%;
left: 67%;
}
.mask .mask_6 {
display: inline-block;
opacity: 0;
width: 650px;
z-index: -5;
position: absolute;
top: 0;
right: 15%;
}
.mask .mask_7 {
display: inline-block;
opacity: 0;
width: 85px;
z-index: -5;
position: absolute;
top: 20%;
left: 76%;
}
.mask .mask_0.active {
-webkit-animation: mask 1.5s ease;
animation: mask 1.5s ease;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.mask .mask_1.active {
-webkit-animation: mask 1.5s ease .3s;
animation: mask 1.5s ease .3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.mask .mask_2.active {
-webkit-animation: mask 1.5s ease .5s;
animation: mask 1.5s ease .5s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.mask .mask_3.active {
-webkit-animation: mask 1.5s ease .7s;
animation: mask 1.5s ease .7s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.mask .mask_4.active {
-webkit-animation: mask 1.5s ease .9s;
animation: mask 1.5s ease .9s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.mask .mask_5.active {
-webkit-animation: mask_02 1.5s ease 1.5s;
animation: mask_02 1.5s ease 1.5s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.mask .mask_6.active {
-webkit-animation: mask_02 1.5s ease 1.5s;
animation: mask_02 1.5s ease 1.5s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.mask .mask_7.active {
-webkit-animation: mask_02 1.5s ease 1.5s;
animation: mask_02 1.5s ease 1.5s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@-webkit-keyframes mask {
from {
opacity: 0;
-webkit-transform: translateX(30px);
transform: translateX(30px);
}
to {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes mask {
from {
opacity: 0;
-webkit-transform: translateX(30px);
transform: translateX(30px);
}
to {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@-webkit-keyframes mask_02 {
from {
opacity: 0;
-webkit-transform: translateX(-30px);
transform: translateX(-30px);
}
to {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes mask_02 {
from {
opacity: 0;
-webkit-transform: translateX(-30px);
transform: translateX(-30px);
}
to {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@media screen and (max-width: 991px) {
.mask {
width: 760px;
}
.mask .mask_0 {
left: -8%;
}
.mask .mask_1 {
left: 12%;
}
.mask .mask_3 {
left: 47%;
}
.mask .mask_4 {
left: 59%;
}
.mask .mask_6 {
right: 10%;
}
.mask .mask_7 {
left: 78%;
}
}
@media screen and (max-width: 767px) {
.mask {
margin-top: 15.6vw;
margin-bottom: 14.3vw;
height: 39vw;
width: 100%;
}
.mask .mask_0 {
width: 25.4vw;
top: -5%;
left: -5%;
}
.mask .mask_1 {
width: 41.7vw;
left: 14%;
}
.mask .mask_2 {
width: 24.4vw;
left: 35%;
}
.mask .mask_3 {
width: 24.4vw;
left: 47%;
}
.mask .mask_4 {
width: 24.4vw;
left: 59%;
}
.mask .mask_5 {
width: 11.9vw;
top: 2%;
left: 70%;
}
.mask .mask_6 {
width: 84.7vw;
top: 0;
right: 8%;
}
.mask .mask_7 {
width: 11vw;
top: 16%;
left: 81%;
}
}
@media screen and (max-width: 575px) {
.mask .mask_7 {
top: 11%;
}
}
.image_0,
.image_01,
.image_02,
.image_03,
.image_04 {
height: 400px;
-o-object-fit: contain;
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;
}
.feature_list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-bottom: 21px;
}
.feature_list .list_item, .feature_list .list_item_02 {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
max-width: 225px;
height: auto;
border: 1px solid #707070;
padding: 20px;
margin-right: 37px;
line-height: 1.0;
font-size: 12px;
font-size: 0.75rem;
}
.feature_list .list_item:first-child, .feature_list .list_item_02:first-child {
border: 1px solid #707070;
}
.feature_list .list_item:first-child:hover, .feature_list .list_item_02:first-child:hover {
border: 4px solid #707070;
}
.feature_list .list_item:last-child, .feature_list .list_item_02:last-child {
margin-right: 0;
}
.feature_list .list_item .text_top, .feature_list .list_item_02 .text_top {
padding-bottom: 18px;
border-bottom: 1px solid #000;
}
.feature_list .list_item .text_bottom, .feature_list .list_item_02 .text_bottom {
padding-top: 20px;
}
.feature_list .list_item_02 {
max-width: 357px;
}
.feature_list .list_item_02:first-child {
border: 1px solid #707070;
}
.feature_list .list_item_02:last-child {
margin-right: 0;
}
.feature .list_item:hover, .feature .feature_list .list_item_02:hover, .feature_list .feature .list_item_02:hover,
.feature .list_item_02:hover {
border: 4px solid #707070;
}
.feature_notes {
margin-bottom: 30px;
padding: 0 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.feature_notes .note {
padding-bottom: 10px;
padding-right: 20px;
font-size: 10px;
font-size: 0.625rem;
}
.feature_notes .note:last-child {
padding-right: 0;
}
.feature .caution {
font-size: 13px;
font-size: 0.8125rem;
}
@media screen and (max-width: 767px) {
.feature {
margin-top: 65px;
margin-bottom: 100px;
}
.feature_list {
display: block;
}
.feature_list .list_item, .feature_list .list_item_02 {
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;
font-size: 22px;
font-size: 1.375rem;
}
.feature_list .list_item:last-child, .feature_list .list_item_02:last-child {
margin-right: auto;
}
.feature_list .list_item .text_top, .feature_list .list_item_02 .text_top {
padding-bottom: 10px;
border-bottom: 2px solid #707070;
}
.feature_list .list_item .text_bottom, .feature_list .list_item_02 .text_bottom {
padding-top: 12px;
}
.feature_list .list_item_02:first-child {
border: 1px solid #707070;
}
.feature_list .list_item_02 .text_bottom_sp {
font-size: 21px;
font-size: 1.3125rem;
letter-spacing: -2px;
}
.feature_notes {
width: 95%;
max-width: 580px;
margin-bottom: 62px;
display: block;
margin-left: 8%;
text-align: left;
}
.feature_notes .note {
padding-bottom: 10px;
padding-right: 0;
font-size: 2.61vw;
line-height: 1.2;
}
.feature .caution {
font-size: 20px;
font-size: 1.25rem;
line-height: 1.1;
padding: 0 30px;
}
}
@media screen and (max-width: 575px) {
.feature_list .list_item, .feature_list .list_item_02 {
font-size: 3.82vw;
}
.feature_list .list_item_02 .text_bottom_sp {
font-size: 3.65vw;
}
.feature .caution {
font-size: 2.8vw;
}
}
.scroll_sp {
display: none;
}
@media screen and (max-width: 767px) {
.scroll_sp {
display: block;
}
}
.color {
margin-bottom: 235px;
text-align: center;
}
.color_text {
font-size: 13px;
font-size: 0.8125rem;
line-height: 2.69;
letter-spacing: 0.65px;
margin-bottom: 97px;
}
.color_list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.color_list img {
max-width: 300px;
padding-right: 5px;
}
.color_list img:last-child {
padding-right: 0;
}
.color .s_block {
display: none;
}
.color .sp_img {
display: none;
}
@media screen and (max-width: 767px) {
.color {
margin-bottom: 162px;
}
.color .sp_img {
display: block;
}
.color .pc_img {
display: none;
}
.color_text {
font-size: 26px;
font-size: 1.625rem;
letter-spacing: 1.3px;
line-height: 2.5;
margin-bottom: 12.6vw;
}
.color_list {
display: block;
}
.color_list img {
margin-right: auto;
margin-left: auto;
max-width: 630px;
padding-right: 0;
width: 85%;
}
.color .s_block {
display: block;
}
}
@media screen and (max-width: 620px) {
.color_text {
font-size: 4.2vw;
}
}
// feature
$(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();
});
});