【Simplicity2カスタマイズ⑦】サムネイル画像のカスタマイズを行う！

Word Pressの超優良で且つ無料テーマであるSimplicity2のカスタマイズを備忘録的に残しています。

Simplicity2のカスタマイズの一覧は、こちらのページからご覧ください。

今回行うカスタマイズは、「トップページに表示されているサムネイル画像をカスタマイズする」です。

行うカスタマイズはリンクが貼られている画像の上にマウスが乗っかると薄く色が変化するのと、マウスが乗った時に画像がボワンと少し浮かび上がるような変化を付けたいと思います。

参考にさせて頂いたのは、以前にも紹介したこともあるこちらの記事（WordPressテーマ「Simplicity」をカスタマイズする19のポイント【2016.04.14更新】 / MASALOG）です。

ここで紹介されていたCSSコードを一つは利用させて頂きました。

画像の上にマウスが乗ると薄く色が変化するCSS

まずはこちらのコードをスタイルシート（style.css）に記述します。

/*---------------------------------
画像ホバー時
--------------------------------*/
 a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}

/*---------------------------------

画像ホバー時

--------------------------------*/

a:hover img {

opacity: 0.7;

filter: alpha(opacity=70);

-ms-filter: "alpha(opacity=70)";

}

通常は画像の上にマウスを乗せても変わらないのですが…

マウスを上の乗っけると、画像が薄いグレーになりました。

といっても、参考の画像をスクリーンショットしようとしても、ほとんど画像では分からなかったのでここでは載せないでおきます。

画像の上にマウスが乗ると、サムネイル画像が浮かび上がるカスタマイズ

これはMASALOGさんのブログ内に書かれていた記事をそのまま引用させて頂きます。

コードは以下です。

/*---------------------------------
サムネイル画像が拡大する
--------------------------------*/
.entry-thumb,.wpp-thumbnail{
  overflow: hidden;
}
.entry-thumb img,.wpp-thumbnail img{
  transition: 0.6s ;
}
 
.entry-thumb img:hover,.wpp-thumbnail:hover {
   opacity: 0.6;
   -moz-transform: scale(1.1,1.1);
  -webkit-transform: scale(1.1,1.1);
  -o-transform: scale(1.1,1.1);
  -ms-transform: scale(1.1,1.1);
}