CSS3アニメーション:ズームアップ

goto_jp 3,214views 更新:2014年5月1日

サンプルはこちら。
http://codepen.io/KazuyoshiGoto/pen/fasIx

サンプルのように人の写真でやると面白いです。

HTML

<div class="imgCircle"></div>

これだけです。
リンク(<a>)に適用してしまっても問題ありません。

CSS(Sass)

.imgCircle {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  background-image: url(***.jpg);
  background-position: center center;
  background-size: auto 100%;
  @include border-radius(200px);
  transition:.5s;
}
.imgCircle:hover {
  background-size:auto 150%;
  @include transform(rotate(10deg));
}

この手法のキモは、<img>タグによる画像ではなくCSSの背景画像を利用する点です。
<img>タグの画像より背景画像の方が縦横中央に簡単に揃えられるためです。

9行目にtransitionを設定し、0.5秒でhover時の変化を行うようにしています。

hoverでは背景のサイズを拡大し、若干回転させて傾けています。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません