マウスオーバーした時に画像がふわっと大きくなる方法

19.04.05

ウェブデザイン備忘録

マウスオーバーした時に画像がふわっと大きくなる方法。
HTML

HTML

<a href="#" id="test"> <img src="#.png"> </a>

1 2 3

<a href="#" id="test"> <img src="#.png"> </a>

CSS

CSS

#test:hover img { -webkit-transform: scale(1.2); transform: scale(1.2); transition-duration: 0.5s; }

1 2 3 4 5

#test:hover img { -webkit-transform: scale(1.2); transform: scale(1.2); transition-duration: 0.5s; }

transform: scale(1.2)で１．２倍の大きさに。transition-duration: 0.5s;で0.5秒かけて変化する。

関連記事

• 
  2023.12.20 ACFで親ページをアーカイブでなく、任意の固定ページに変更する方法
• 
  2018.11.15 firefoxのバージョンとfirebugの互換性
• 
  2023.05.26 Slick カルーセルでPCとスマホで見せる画像の枚数をそれぞれ変える。wordpress
• 
  2023.05.26 Slickの基礎導入方法。wordpressでスライダーやカルーセルなど自由に設定。
• 
  2020.04.08 ドメインだけを他のサーバー（サクラサーバー）へ引っ越し
• 
  2020.10.07 ブラウザの縦幅サイズいっぱい表示、その中央に画像などのコンテンツを置く方法