【カスタマイズ】サムネイルにマウスが乗った際にズームされて、少し白くなるような効果をつけるコードをやっと理解できた件。。。

しばらくコピペで使って気に入ったからつけていたマウスが載るとズームされて、霧がかかって白くなる効果。コードがなんか複雑でわからなかったのですが、やっと解読できたのでまとめます。

すごいよかったのですが、なんか白くなりすぎだし、ズームされすぎ、なんかうざい。と思ったのがきっかけです。

スポンサーリンク
スポンサーリンク

具体的にサムネイルのどの部分?

communication_3_0-2

上の画像の上にマウスを置くと。。。

communication_3_0

こんな感じで霧がかかったようになって、ズームになるという仕様です。

なんとなくおしゃれだなって思って使ってました。

コードの挿入、style.cssへ

では早速コードを記入。もちろん子テーマへ、バックアップも忘れずに。。。

以上でこのサイトと同じようなエフェクトに設定可能です。

しかし、これだけでは自分好みのエフェクトへ設定はできないので、解説していきます。

の部分の「0.2s」の部分。最後に【s】がついているので勘の良い方はわかるかと思いますが、拡大に何秒かけるか?と言うのを設定するコードになります。

この数字を大きくすればゆっくり拡大する事になります。

の部分で「0.7」は霧のかかり具合を設定できます。

パーセンテージなので、数字を低くすればするほど、オリジナル画像より薄くなり、より濃い霧がかかったようになります。

最後に

の「1.05」はマウスオーバーした時にどれだけ拡大するかを指定しています。

「scale(1.05)」は「105%の大きさに拡大する」と言う意味です。

「scale(1.0)」とすると大きさは100%のままになるので変化しないと言う事になります。

以上の数値をいじって、お好みのエフェクトを実現するのに役立つと幸いです。

スポンサーリンク
スポンサーリンク
スポンサーリンク

シェアする

フォローする