CSS内のアニメーションバナーのレイアウトの問題を修正するにはどうすればよいですか？

Question

私はコーディングスキルを向上させるために練習用ウェブサイトを作っています。私はスクロールイメージバナーを作ろうとしています。ボーダーを追加しようとするとバナーが表示されますが、ボーダーはオブジェクト全体には行きません。

私はCSSのバナーのレイアウトとアニメーションを作成しましたが、バナーの終わりにはバナーが続く前に4/5秒の切り抜き以外の問題はありませんでした。

サイズが定義されているバナーのCSSに罫線を追加しようとしましたが、上記の問題が発生しました。下のバナーのCSSのスクリーンショット（アニメーションCSSは含まない）を含めました。

エラー：

CSS：

Answer 1

これは、画像に適用transform財産です。スケールたとき（それは、独自のレイヤのコンテキストを取得するため）、画像はその親をオーバーレイします：

div { 
 
    padding:1em; 
 
    border:1px solid; 
 
} 
 

 
div img:hover { 
 
    transform:scale(2); 
 
}

<div><img src="http://placehold.it/200/200" alt=""></div>

あなたはimg自体の代わりに親の周囲に境界線を配置することによって、この問題を解決できます。

div { 
 
    padding:1em; 
 
} 
 

 
div img { 
 
    border:2px solid red; 
 
} 
 

 
div img:hover { 
 
    transform:scale(2); 
 
}

<div><img src="http://placehold.it/200/200" alt=""></div>

A代わりに、scale変換プロパティを避け、高さ/幅を拡大して画像を拡大して、より制御しやすくすることができます。