ホバー時画像がゆっくり拡大するホバー

■画像がゆっくり拡大するホバー■

#nav2 .nav3{ padding-top:106px; }

#nav2 .nav3:hover img{ margin: -10px 0 0 0; transform: scale(1.5,1.6) }

#nav2 .nav3 img{ -webkit-transform: scale(1);   transform: scale(1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out  }

ポイント

  • ・必ずimg要素にtransformをつける。
  • ・ transition: .3s ease-in-outで速度指定。この順番でかく。
  •  ・ transform: scale(1);はどっちでもよい。
  •  ・拡大は1が基本の大きさ。少数点で指定。