---

今回はこちらのちひゆず画像をサンプルに、五種類のエフェクトを紹介します。

---

基本クラス

まず、こちらがベースとなるクラスのCSS。

.baseH{  /* 表示領域のデザイン(適当) */
  margin: 20px auto;
  box-shadow: 2px 2px 3px #bcbfbf;
}
.baseH,
.coverH{  /* 画像を背景イメージとして表示するための設定 */
  overflow: hidden;
  background: transparent no-repeat;
  background-size: cover;
}
.coverH{  /* 二つの画像の大きさを合わせる設定 */
  width: 100%;
  height: 100%;
}

イメージはこんな感じ。 同じ大きさの、親子関係になるdiv要素を作り、親のクラス名をbaseH、子のクラス名をcoverHと呼びます。(Hはhumotomitiの頭文字)
各々に画像を載せて、子要素の方をマウス操作で消し、親要素の画像を見せる、という仕組みです。
HTMLはこんな感じ。

<div class="baseH 親画像のクラス名">
  <div class="coverH 子画像のクラス名 エフェクトのクラス名"></div>
</div>

マーカーをつけた部分に画像とエフェクトを指定します。
つまり、タグの中にクラス名を書くだけで完結します。

画像クラス

画像は、上のdiv要素の背景画像として表示します。
ちなみに、画像を表示するのに<img>タグを使わない理由は、以前も書きましたが、ライブドアブログのスマホ版ページの仕様にあります。
ライブドアブログのスマホ版ページでは<a>タグを外してある画像にも自動的にリンクが貼られてしまい、タップした時、エフェクトとリンク動作がバッティングしてしまうので、それを回避するためです…

.sample-image-01{  /* div.baseH に表示する画像 */
  width: 452px;
  height: 201px;
  background-image: url(base画像のURL);
}
.sample-image-02{  /* div.coverH に表示する画像 */
  width: 452px;
  height: 201px;
  background-image: url(cover画像のURL);
}

ある画像を一枚表示するだけなら、この内容をHTMLのstyle属性に書き込んでも手間は変わりませんが、<style>タグのところにまとめておいた方が管理がし易いです。
なお、子画像としてのみ使うクラスにはwidthとheightの指定は要りません。本稿では応用で両者を入れ替えるサンプルがあるので、両方に同じ値を指定しています。

エフェクトクラス

以下、各エフェクトのクラスについて説明します。
サンプルでは変化が分り易いように、変化にかかる時間(transition-duration)をゆっくり目(0.5秒)に設定していますが、実装する時は0.1～0.2秒ぐらいにするのが普通だと思います。

effectH-opacity

最初にお見せしたのと同じサンプルですが、説明のために再掲。
ウチが主に使っているエフェクトです。いちばん設定が楽、かも。 上の画像がフェイドアウトする事で、下の画像が見えるようになります。

.effectH-opacity{  /* 透明度を変更するエフェクトの設定 */
  opacity: 1;
  transition: .5s;
}
.effectH-opacity:hover{  /* マウスオーバー時の設定 */
  opacity: 0;
}

<div class="baseH sample-image-01">
  <div class="coverH sample-image-02 effectH-opacity"></div>
</div>

effectH-toRight

画像が右に引っ込みます。

.effectH-toRight{  /* 位置を変更するエフェクトの設定 */
  transform: translate(0);
  transition: .5s;
}
.baseH:hover .effectH-toRight{  /* マウスオーバー時の設定 */
  transform: translate(100%);
}

transform: translate()関数は、top、rightなどのような position系プロパティに比べCPUへの負担が少なく、アニメーションさせても動作が軽いそうです。
親要素にposition: relativeを指定して…といった面倒なルーティンも要りません。
私もこれからはなるべくこちらを使っていきたいです。

<div class="baseH sample-image-01">
  <div class="coverH sample-image-02 effectH-toRight"></div>
</div>

effectH-fromBottomLeft

前項の応用で、引っ込むのではなく、出てくるパターン。
せっかくなので左下から出てくるように設定しました。

.effectH-fromBottomLeft{  /* 位置を変更するエフェクトの設定 */
  transform: translate(-100%, 100%);
  transition: .5s ease-in-out;
}
.baseH:hover .effectH-fromBottomLeft{  /* マウスオーバー時の設定 */
  transform: translate(0, 0);
}

<div class="baseH sample-image-02">
  <div class="coverH sample-image-01 effectH-fromBottomLeft"></div>
</div>

動かすことになったsample-image-01の方を内側に設定します。

effectH-scale

画像が縮小して消えます。

.effectH-scale{  /* 表示倍率が変化するエフェクトの設定 */
  transform: scale(1);
  transition: .5s ease-in-out;
  -webkit-transform-origin: top right;
  transform-origin: top right;
}
.baseH:hover .effectH-scale{  /* マウスオーバー時の設定 */
  transform: scale(0);
}

倍率変更の基準点はtransform-originプロパティに指定します。
何も指定しなければ画像の中央が基準点になります。
ベンダープレフィックスはAndroid用です(以下同じ)。

<div class="baseH sample-image-01">
  <div class="coverH sample-image-02 effectH-scale"></div>
</div>

effectH-rotateX

画像が転倒します。 画像が奥に向かって倒れているように見せるため、pers-600というクラスを作り、親要素に設定しています。
これが無いと奥行き感が出ず、単に縦方向に縮んでいるように見えてしまいます。

.effectH-rotateX{  /* 回転角を変更するエフェクトの設定 */
  transform: rotateX(0);
  transition: .5s ease-in-out;
  -webkit-transform-origin: bottom;
  transform-origin: bottom;
}
.baseH:hover .effectH-rotateX{  /* マウスオーバー時の設定 */
  transform: rotateX(90deg);
}
.pers-600{  /* パース効果の設定 */
  -webkit-perspective: 600px;
  perspective: 600px;
  -webkit-perspective-origin: bottom;
  perspective-origin: bottom;
  overflow: visible!important;
  backface-visibility: hidden;
}

変形の基準点transform-originと消失点perspective-originを一致させておかないと、倒れてもアオリが見えてしまうので注意。
overflow: visibleは、傾斜角度がマイナスの時(手前に倒れる)の指定、更に-90deg より絶対値を大きくする場合は、backface-visibilityプロパティで画像の背面を見せるかどうかを指定します。

<div class="baseH sample-image-01 pers-600">
  <div class="coverH sample-image-02 effectH-rotateX"></div>
</div>

親要素に遠近感を出すクラスpers-600が追加されている点に留意して下さい。

---

以上はCSSで実現できるホバーエフェクトのほんの一部です。
これからもちょこちょこ仕込んでいきたいです。