当ブログでは現在、カーソルを置く（オンマウスする）と、一覧ページのアイキャッチの画像がふわっと大きく拡大される効果を設定しています。
Javascript（Jquery）不要！CSSの設定だけですぐにできます！
オンマウスにするとふわっと拡大
動かないイメージ画像だけで申し訳ないんですが、画像の上にマウスを持ってくると、ふわっと画像が大きくなる効果を設定しています。
スマホの場合は、指をあてると一瞬大きくなるはずですが、その前に画面が移動してしまうのであまり意味はないかもしれません。
ふわっと大きくなる効果の設置方法
『カスタマイズ』→『カスタムCSS』に、以下のコードを追加してください。
ただし、これはCocoonの設定ですので、それ以外のテーマをお使いの場合は適宜変更してください。
main .card-thumb{
overflow:hidden;
}
main .card-thumb img{
transition-duration: 0.5s;
}
main .card-thumb img:hover{
transform: scale(1.2);
transition-duration: 0.5s;
}これで、一覧ページのメイン部分のアイキャッチが、マウスオンすることでふわっと拡大されるようになるはずです。
メイン以外のアイキャッチはふわっとならないの？
メイン以外もふわっとさせるように、.card-thumb 全体を指定すると、アイキャッチのサイズによっては全く表示されなくなってしまうものが出てきてしまいました。
overflow:hidden; が影響しているものと思われますが、overflow:hidden;を消すと、こんどは拡大した分画像がはみ出してしまうようになります。
もう少し深く追求したら、できるようになるかとは思いましたが、面倒になったので、やめました!
CSSを使って簡単にふわっとできました
この効果を使ったからどうだというわけではないのですが、ちょっとだけお洒落になったような気がします。
興味があったら、やってみてはいかがでしょう？
