CocoonWordPress

【Cocoon】ホバー時のサムネイル画像をカスタマイズする

アイキャッチ画像 Cocoon
スポンサーリンク

ホバー時のサムネイル画像

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

テーマCocoonのホバー時のサムネイル画像

WordPressテーマ Cocoonで使われている「ホバー時のサムネイル画像」は、特に変化がありません。

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

【WordPress】ホバー時のサムネイル画像をカスタマイズする

サムネイル画像に変化は無く、サムネイル画像以外の背景色が変化する処理となっています。

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

ホバー時のサムネイル画像のカスタマイズ

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

カスタマイズ内容

「ホバー時のサムネイル画像」のカスタマイズは、下記の通りです。

このカスタマイズ内容を「スタイルシート(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;
}

カスタマイズ後のホバー時のサムネイル画像

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

【WordPress】ホバー時のサムネイル画像をカスタマイズする

最後に

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

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

コメント

タイトルとURLをコピーしました