• RSS

[CSS]画像のマウスオーバー時にtransformで拡大縮小表示する

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

マウスオーバーした画像を、CSS3のtransformで拡大縮小表示させる方法のご紹介です。

ブロック要素固定時の画像の拡大縮小

CSSの記述例は以下の通りです。

.sampleという名前の要素に幅と高さに加え、overflow:hiddenを指定します。
次に、transition: transform 0.5s linearでマウスオーバー時の画像の拡大縮小速度を指定します。
また、transform: scale(1.5)で拡大縮小の倍率を指定します。

※0.5sや1.5の数字はご利用のサイトに合わせて変えてみてください。


HTMLはこのような感じです。


↓画像にマウスを乗せると、拡大表示されるようになります。



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください