【Cocoon】ホバー時のアイキャッチ画像をカスタマイズする

ホバー時のアイキャッチ画像

前回のエントリー記事で「ホバー時の背景色」を設定しましたが、今回は「ホバー時のアイキャッチ画像」のカスタマイズについてまとめてみました。

テーマCocoonのホバー時のアイキャッチ画像

WordPressテーマ Cocoonで使われている「ホバー時のアイキャッチ画像」は、特に変化がありません。

例えばランキングをホバーしたときは次の様になっています。

アイキャッチ画像に変化は無く、アイキャッチ画像以外の背景色が変化する処理となっています。

その他の「関連記事」「次の記事」「前の記事」などの項目に対しても、「ホバー時のアイキャッチ画像」に変化がありません。

ホバー時のアイキャッチ画像のカスタマイズ

今回のカスタマイズの内容は、「ホバー時のアイキャッチ画像」に対して透明度の設定とアニメーションを付加してみました。

カスタマイズ内容

「ホバー時のアイキャッチ画像」のカスタマイズは、下記の通りです。

このカスタマイズ内容を「スタイルシート(style.css)」に追記します。

/************************************
** ■アイキャッチ画像のホバー時エフェクト処理
************************************/
/*記事一覧の画像*/
.entry-card:hover figure img{
  opacity: 0.6;
  transition: all 0.8s ease;
}
/*記事一覧画像の画像*/
.entry-card-wrap.a-wrap:hover figure img{
  opacity: 0.6;
  transition: all 0.8s ease;
}
/*人気記事の画像*/
.popular-entry-card-link.a-wrap:hover figure img{
  opacity: 0.6;
  transition: all 0.8s ease;
}
/*関連記事の画像*/
.related-entry-card-wrap.a-wrap.cf:hover figure img{
  opacity: 0.6;
  transition: all 0.8s ease;
}
/*次の記事の画像*/
.prev-post.a-wrap.cf:hover figure img{
  opacity: 0.6;
  transition: all 0.8s ease;
}
/*前の記事の画像*/
.next-post.a-wrap.cf:hover figure img{
  opacity: 0.6;
  transition: all 0.8s ease;
}
/*ブログカードの画像*/
.blogcard:hover figure img{
  opacity: 0.6;
  transition: all 0.8s ease;
}
/*ブログカード画像の画像*/
.blogcard-thumbnail:hover figure img{
  opacity: 0.6;
  transition: all 0.8s ease;
}
/*タイトル画像*/
.site-name-text:hover img{
  opacity: 0.6;
  transition: all 0.8s ease;
}

カスタマイズ後のホバー時のアイキャッチ画像

今回のカスタマイズによって、「ホバー時のアイキャッチ画像」が「ホバー時の背景色」とマッチするようになりました。

最後に

前回の「ホバー時の背景色」のカスタマイズで違和感を感じた場合は、今回の「ホバー時のアイキャッチ画像」のカスタマイズを行うと良いでしょう。

今回のエントリー記事で、各項目のホバー時の処理は完了です。