jQueryでDock(ドック)風?

マウスオーバーで画像を拡大・縮小させてDock(ドック)風?にしてみました。

画像を元のサイズより小さく表示させておいて、
マウスオーバーで元のサイズを表示させて画像が大きくなったように見せるアニメーションです。

▼以下が実際のソースサンプルです。

基準となるwidth/heightをJavaScriptを使って表示する画像のサイズを拡大/縮小させています。
さらに、Macのdock風のbottom基準をするために、
JavaScriptの”marginTop”を調節しています。

▼CSS

▼HTML

今回、参考にさせていただいたのは、
プラグインを使わずに、かんたん実装できるjQueryマウスオーバーアニメーションのまとめ – NEET-NAVI』さんです。

ありがとうございます。

デモページは、こちら