モバイルファーストのサムネイル画像ホバーエフェクト

モバイル端末を重視したサムネイル画像のホバーエフェクト

福岡在住ウェブデザイナー。 WordPress のカスタマイズを、「見やすさ」と「使いやすさ」にこだわり紹介しています。

カスタマイズ箇所サムネイル画像
カスタマイズ方法CSS
テンプレート変更なし
コピペの可否90% 可能

サイトに手軽にアニメーションを導入できるのが、ホバーエフェクト。

アニメーションのあるサイトは、サイト訪問者を楽しませます。

また、モバイル端末でタップした際に、狭い画面でもタップしたことを明確に伝えるのもホバーエフェクトの魅力。

使いやすいサイトになるように、モバイル端末を重視したサムネイル画像のホバーエフェクトをご紹介します。

共通設定

使用するのは、 Simplicity の一覧リストのスタイル「大きなエントリーカード」。

HTML は以下のとおりです。

<figure class="entry-large-thumb">
  <img class="entry-large-thumnail">
</figure>

共通の CSS 。

.entry-large-thumb {
  display: block;
  margin: 0;
}

.entry-large-thumnail {
  box-sizing: border-box;
  height: auto;
  width: 100%;
}

画像を透過させ背景色を見せる

サムネイル画像のホバーエフェクトで最も多いのが、画像に色を付けるもの。

サムネイル画像の親要素の <figure> に背景色を指定し、サムネイル画像をホバー時に透過させます。

.entry-large-thumb {
  background: #e91e63;
}

.entry-large-thumnail {
  display: block;
  transition: .3s cubic-bezier(.4,0,.2,1);
}

.entry-large-thumnail:hover {
  opacity: .54;
}

すると、ホバー時にサムネイル画像がかわいいピンク色に。

サムネイル画像に display: block を指定しないと、 <figure> の背景色が常に見えてしまうためご注意ください。

<figure> の背景色をグラデーションにすると、今風のサイトデザインに。

.entry-large-thumb {
  background: linear-gradient(to top, #c471f5 0%, #fa71cd 100%);
}

.entry-large-thumnail {
  display: block;
  transition: .3s cubic-bezier(.4,0,.2,1);
}

.entry-large-thumnail:hover {
  opacity: .54;
}

グラデーションの配色は、 WebGradients から選びました。

画像にフィルターをかける

filter プロパティを使うことでも、サムネイル画像の色を変更できます。

例えばセピア色にしてみます。

.entry-large-thumnail {
  transition: .3s cubic-bezier(.4,0,.2,1);
}

.entry-large-thumnail:hover {
  filter: sepia(100%);
}

たったこれだけで、サムネイル画像がホバー時にセピア色に。

(100%) の値を変えることで、セピアの度合いを調整可能です。

次は白黒にしてみます。

.entry-large-thumnail {
  transition: .3s cubic-bezier(.4,0,.2,1);
}

.entry-large-thumnail:hover {
  filter: grayscale(100%);
}

とても簡単。

ただし、 IE は filter プロパティに対応していません。

また、 Edge は filter プロパティに対応していますが、url() は使えません。

他のモダンブラウザは、ベンダープレフィックスなしで使用できます。

filter プロパティでどのようなエフェクト関数が使えるかは、「 Photoshop はもういらない?明度も彩度も超手軽に変えられる CSS フィルターがスゴい」をご参考ください。

画像を大きく・小さくする

ホバー時に色を変えるエフェクトは、色の識別が難しい方には優しいエフェクトではありません。

そこで採用したいのが、大きさを変えるもの。

transform: scale を使うことで、サムネイル画像の大きさを変更できます。

.entry-large-thumnail {
  transition: .3s cubic-bezier(.4,0,.2,1);
}

.entry-large-thumnail:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,.2);
  transform: scale(1.1);
}

サムネイル画像が 1.1倍大きくなります。 box-shadow を指定するかはお好みで。

逆に小さくするのも、タップしたことが伝わりやすいエフェクトです。

.entry-large-thumnail {
  transition: .3s cubic-bezier(.4,0,.2,1);
}

.entry-large-thumnail:hover {
  transform: scale(.88);
}

<figure> に背景色を指定して、小さくしてみます。

.entry-large-thumb {
  background: linear-gradient(to top, rgba(196,113,245,.3) 0%, rgba(250,113,205,.3) 100%);
}

.entry-large-thumnail {
  display: block;
  transition: .3s cubic-bezier(.4,0,.2,1);
}

.entry-large-thumnail:hover {
  transform: scale(.88);
}

ボーダーが指定されているように表示されました。

表示位置を変更する

transform:translateY を使用し、表示位置を動かすサイトもよく見かけます。

.entry-large-thumnail {
  transition: .3s cubic-bezier(.4,0,.2,1);
}

.entry-large-thumnail:hover {
  transform: translateY(-24px);
}

サムネイル画像が 24px 上に移動します。

モバイル端末の小さな画面でも確認しやすいエフェクトです。

画像の周囲にボーダーを付ける

画像の周囲にボーダーを表示するサイトも多くあります。

.entry-large-thumnail {
  border: 0 solid transparent;
  transition:.3s cubic-bezier(.4,0,.2,1);
}

.entry-large-thumnail:hover {
  border: 40px solid #f48fb1;
}

<figure> に背景色を付け、 transform: scale で画像を小さくするエフェクトに似ています。

しかし、 border だからできることもあります。

.entry-large-thumnail {
  border: 0 solid transparent;
  transition:.3s cubic-bezier(.4,0,.2,1);
}

.entry-large-thumnail:hover {
  border-bottom: 40px solid #f48fb1;
  border-left: 40px solid #81d4fa;
  border-top: 40px solid #f48fb1;
  border-right: 40px solid #81d4fa;
}

上下左右の border を異なる値にすることで、背景色では表現が難しいホバーエフェクトにできます。

ただ、単にホバー時に border を指定するだけでは、画像周囲のレイアウトまで変化するため注意が必要です。

@keyframes アニメーションを指定する

@keyframes を指定することで、アニメーションを柔軟に表現できます。

先ほどの transform: scale と併用してみると…。

.entry-large-thumnail {
  transition: .4s cubic-bezier(.4,0,.2,1);
}

.entry-large-thumnail:hover {
  animation: thumnail-effect .5s cubic-bezier(.4,0,.2,1);
  transform: scale(1.1);
}

@keyframes thumnail-effect {
  0% {
    transform: scale(1);
  }
  60% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1.1);
  }
}

0.5秒の間に、サムネイル画像が 1.2倍まで大きくなった後で 1.1倍の大きさに変わります。

また、 .entry-large-thumnail:hover に対し transform: scale(1.1) を同時に指定しています。これで @keyframes アニメーションが終わった後も、ホバーし続けている間 1.1倍の大きさが維持されます。マウス操作のパソコンでの表示が犠牲になることはありません。

今度は小さくするアニメーションに、 <figure> の背景色とサムネイル画像の透過も指定します。

.entry-large-thumb {
  background: linear-gradient(to top, rgba(196,113,245,.3) 0%, rgba(250,113,205,.3) 100%);
}

.entry-large-thumnail {
  display: block;
  transition: .4s cubic-bezier(.4,0,.2,1);
}

.entry-large-thumnail:hover {
  animation: thumnail-effect .5s cubic-bezier(.4,0,.2,1);
  opacity: .54;
  transform: scale(.88);
}

@keyframes thumnail-effect {
  0% {
    transform: scale(1);
  }
  70% {
    transform: scale(.8);
  }
  100% {
    transform: scale(.88);
  }
}

タップしたことを伝えるだけではなく、サイトに独自性が出ます。


どんなホバーエフェクトを表現できるかはアイデア次第。

「モバイル端末でタップした時に、どう見えるか?」を考慮し、アイデアを練るといいかもしれません。

サムネイル画像をホバー時にテキストを表示するようなホバーエフェクトは、最近ではあまり見かけなくなりました。

だって、スマホでタップした瞬間にテキストが表示されても絶対読めない。

Facebook ページにいいね!をする
Twitter でフォロワーになる

シェアする

URL をコピーする