マウスオーバー(:hover)で画像を拡大させる方法

自分のサイト、動きが少なく寂しいなぁとかねてから気になっていたため、
ポートフォリオ一覧の画像にマウスオーバーした時、リンク画像が拡大するようにしてみました。

ポートフォリオの画像を配置してリンクを貼る

ポートフォリオ一覧の画像は、

<div class="scalearea">
    <a href="<?php the_permalink();?>">
    <?php if(has_post_thumbnail()): ?>
        <?php the_post_thumbnail('portfolio_thumbnail', array( 'class' => 'scale' )); ?>
    <?php endif; ?>
    </a>
</div>

で呼び出しています。(portfolio_thumbnail部分はfunction.phpに任意で設定しました。)
imgにclass=”scale”を追加しました。

ブラウザで見ると下記のような記述になっています。

<div class="scalearea">
    <a href="http://exsampleindex.com">
        <img src="http://exsample.jpg" alt="exsample" class="scale">
    </a>
</div>

CSSで動きを設定

.scalearea {
    overflow: hidden;
}
.scale {
    -moz-transition: 0.2s linear;
    -webkit-transition: 0.2s linear;
    -o-transition: 0.2s linear;
    -ms-transition: 0.2s linear;
    transition: 0.2s linear;
}
.scale:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

マウスオーバーした時の画像の状態

transform: scale(1.1)　・・・　1.1部分に拡大率を入力。1が100%。1.1は110%。

上記の状態になるまでの動き

transition: 0.2s linear;　・・・　0.2秒で、一定速度(=liner)で、を意味します。

拡大した画像が.scaleareaからはみ出ないようにする

.scaleareaにoverflow:hidden;を記述しました。

参考

raining-『CSS：CSS3の「transform:scale()」でhoverした時に画像を拡大する』
このブログ記事を参考にさせて頂きました。
ありがとうございました。

---