自分のサイト、動きが少なく寂しいなぁとかねてから気になっていたため、
ポートフォリオ一覧の画像にマウスオーバーした時、リンク画像が拡大するようにしてみました。
ポートフォリオの画像を配置してリンクを貼る
ポートフォリオ一覧の画像は、
[html]
<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>
[/html]
で呼び出しています。(portfolio_thumbnail部分はfunction.phpに任意で設定しました。)
imgにclass=”scale”を追加しました。
ブラウザで見ると下記のような記述になっています。
[html]
<div class="scalearea">
<a href="http://exsampleindex.com">
<img src="http://exsample.jpg" alt="exsample" class="scale">
</a>
</div>
[/html]
CSSで動きを設定
[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);
}
[/css]
- マウスオーバーした時の画像の状態
- 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した時に画像を拡大する』
このブログ記事を参考にさせて頂きました。
ありがとうございました。