画像の上に空白が出来てしまうのを消したいです

css で画像を斜めにして横並びにしています。

すると、上の方に隙間が出来てしまいます。
疑似要素でマスクをつくっているところに、画像もあわせたいのですが隙間が出来ています。

どうしたら上に隙間ができなようにできるのでしょうか？

試した事

画像を縦向きにしましたが変わりませんでした。

検証ツールを見て,margin padding があるかチェックしましたがありませんでした。

追記、　overflow:hidden; で平行四辺形にすると下にはみ出るのを隠しているのですが
その部分が空いたので鼻以下と推測できますが、それを解消する方法はわかりませんでした。
追記
コードペンのURLを記載します

<section id="classes">
<div class="content">
<h2 class="section-title color-white">
  <span class="en">CLASSES</span><!-- /.en -->
  <span class="ja">クラス紹介</span><!-- /.ja -->
   </h2><!-- /.section-title -->
  <ul class="class-box-list">
    <li>
     <h3 class="class-name">キッズクラス</h3>
<img src="https://placeimg.com/200/200/people" alt="" class="kids">
  </li>
    <li>
     <h3 class="class-name">初心者クラス</h3>
     <img src="https://placeimg.com/200/200/people" alt="" class="beginner">
    </li>
    <li>
     <h3 class="class-name">一般クラス</h3>
     <img src="https://placeimg.com/200/200/people" alt="" class="general">
    </li>
    <li>
     <h3 class="class-name">女性クラス</h3>
     <img src="https://placeimg.com/200/200/people" alt="" class="lady">
    </li>
  </ul>


</div><!-- /.content -->
</section><!-- /#classes -->

/*-------------------------------------------
classes
-------------------------------------------*/

#classes .content{
 position: relative;
height:500px;
width:100%;
background-color: #F75E5E;
}



#classes .content .section-title{
 position:absolute;
 top:50px;
 left:30px;
 z-index:5;
}

#classes .class-box-list{
  position: absolute;
 display:flex;
 left:120px;
}

#classes .class-box-list li{
 width:280px;
 height:500px;
 transform:skewX(-20deg);
  background-size:contain;
  background-repeat: no-repeat;
  background-position: center;
  overflow:hidden;
  }
#classes .class-box-list img{
 width:100%;
 height:100%;
 object-fit:cover;
}


#classes .content .class-name{
 font-size: 1.5rem;
    font-weight: bold;
    width:100%;
    position: absolute;
    top: 50%;
    text-align:center;
    transform:skewX(20deg);
    position:relative;
    z-index:5;
}



#classes  .class-box-list li::before{
 content: "";
    position: absolute;
      z-index: 3;
 background-color:rgba(0,0,0,.5);
   width:100%;
   height:100%;
}



.kids{
 transform:skewX(0deg);

}
.beginner{
 transform:skewX(0deg);
 }
.general{
 transform:skewX(0deg);

}
.lady{
 transform:skewX(0deg);

}

itagagaki

2022/05/18 16:54

空白というのはどこの部分を言っていますか？もしかして画像のすぐ上の濃い赤ですか？そのさらに上の明るい赤ではなく

niconic73027793

2022/05/18 17:05

画像の上の濃い赤ですね。マスクがかかってる部分です。

itagagaki

2022/05/18 17:36

あれ？codepenのほうはもう直ってるじゃないですか。

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

回答1件

ベストアンサー

ulのmarginじゃないですか？

↑
これも余白になっていますが、質問者が言っていた空白とは別の部分でした。

質問者が言っていたのは画像のすぐ上の部分の空間のことで、それは #classes .content .class-name で生まれています。
せっかくposition: absolute;を指定しているのに、その下にposition: relarive;があります。それを削除すれば解決すると思います。
あと、この部分はおそらく中央に表示したいのだと思いますが、marginがあるためちょっとズレていると思います。
margin: 0;も指定してあげると良いと思います。

あと、結果的に影響は出ていませんが、#classes .class-box-listにはlist-style: none;を指定しておいたほうが良いかと思います。

投稿2022/05/18 15:18

編集2022/05/18 17:34

itagagaki

総合スコア8402