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

スポンサーリンク
LINEで送る
Pocket

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

画像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であってもレイアウトが崩れることはない。

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

関連デザイン

画像にカーソルを合わせると徐々に白いぼやをかける方法 コピペで使えるHTML+CSS
画像、img要素にマウスカーソルを合わせると、徐々に白くなり、離すと徐々に元の画像に戻る。hoverの逆も含め、hoverの前後にアニメーションを付けます。 ...
LINEで送る
Pocket

タイトルとURLをコピーしました