オーバーマウスエフェクトが上手くいかない

質問

サイト制作初心者です。MVを紹介したサイトを制作しています。youtubeから取得した動画の画像を取得し、その画像を自分が思うように並べることまではできました。（クリックしたらモーダルウィンドウが開いて動画を視聴できます）

ですが、そこから並べた動画にオーバーマウスエフェクトのHTML&CSSのコードを加えると、画像の位置がおかしくなります。画像の位置は変わらないのですが、空白が上にpaddingしておいた25px分くらい上に生じてしまいます。

どういったことが原因と考えられるでしょうか。
参考画像を追加しました。

もうすぐ完成し、ポートフォリオとして使用したいのでお時間を割いていただける方、もしよろしければご教授お願いいたします。

※備考

↓一応写真でいう『元の状態』のCSSを貼っておきます。他に必要なコードがありましたら教えてください。
#wonderWrap {
width: 1300px;
height: 2000px;
position: relative;
background: url(../Images/legoBrown.gif);
}

#wonderWrap header {
width: 1300px;
height: 2000px;
position: absolute;
}
#wonderWrap header h1 {
width: 200px;
height: 60px;
padding: 100px 0;
font-size: 50px;
margin: 0 auto;
}
#wonderWrap header ul {
width: 1000px;
heigh: 2000px;
margin: 0 auto;
padding: 0 0 50px 25px;
}
#wonderWrap header li {
float: left;
padding: 25px 25px 0 0;
}

回答No.2

Squonk · ベストアンサー

ちょっとCSS/HTMLともに情報不足過ぎて回答が集まらないのではないでしょうか。

#wonderWrap、header、h1、ul、li、これらが画像でいうどの部分に使用されているのかさっぱりです。
見たところ全部、Youtubeのサムネイル画像を表示するものではないので本件とは関係が無いように思えるのですが。

画像の表示位置に関しての質問ならば、画像を並べるのにどういった方法を使っているのかが分からないとどうしようもないです。単に<img src="ーー"><img src="ーー"><img src="ーー">で並べているのか？divやspanなどの中に<img src="ーー">を入れてdiv/spanにCSSを適用しているのか？　Youtubeから取得した～とのことですので、<img src="ーー">ではなくiframeなどで埋め込みをしているのかとも考えられますし。

またオーバーマウスエフェクトを追加するとおかしくなったというならば、オーバーマウスエフェクトのHTML/CSSも載せるべきです。

＞空白が上にpaddingしておいた25px分くらい上に生じてしまいます。
……ならばpaddingが原因ではないのでしょうか？

回答No.3

Squonk

No.2の回答の者です。更新ができていなかったせいで、No.1の方と回答内容が被ってしまい申し訳ありません。本来なら削除したいところですが、回答の削除ができない仕様なのでこの場をお借りして謝罪いたします。解答欄を汚してしまい重ね重ね申し訳ないです。

回答No.1

benzo_1

この情報だけではちょっと厳しいですね。
HTMLの構造がどうなっているか、オーバーマウスエフェクトのために追加したHTML&CSSがどういったものなのかが知りたいです。
サンプル作ってWEBで公開してもらえたら一番いいと思います。