画像にカーソルを合わせると少し拡大する方法コピペで使えるHTML+CSS

画像、img要素にマウスカーソルを合わせると、画像が少し拡大して表示されます。カーソルが当たっていることを閲覧者に知らせることができる。absoluteを使用するため、高さについて注意を要します。

INDEX

画像imgを少し拡大
関連デザイン

画像imgを少し拡大

スタイルシートで記述

<div class="over-animation"><img csrc="sakura.jpg" /></div>

.over-animation{
 position: relative; /* 画像について絶対配置abosoluteを用いるため、親はrelativeに設定する */
 height:335px;
}
.over-animation img{
  position: absolute;
  left:10px;
  top:10px;
  width:600px;
  transition: all 0.5s;
}
.over-animation:hover img{
  left:0px; /* 10px→0px とし、幅も600から630とする  実際の動作を確認して指定すると良い */
  top:0px;
  width:630px;
}

imgの親のdivについて、heightを指定しておく。これを指定することでimgがabsoluteであってもレイアウトが崩れることはない。

ウィンドウの幅によっては上手く動作しません。必要に応じて画像サイズを調整してください。また、他の方法があれば追記いたします。