カーソルを置くとアイキャッチがふわっと大きくなる特殊効果のCSS【Cocoon用設定】

Wordpress

当ブログでは現在、カーソルを置く(オンマウスする)と、一覧ページのアイキャッチの画像がふわっと大きく拡大される効果を設定しています。

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を使って簡単にふわっとできました

この効果を使ったからどうだというわけではないのですが、ちょっとだけお洒落になったような気がします。

興味があったら、やってみてはいかがでしょう?

Wordpress
スポンサーリンク
この記事を書いた人

フリーのパソコンインストラクター、WEBコンサルタントをしています。
愛知県瀬戸市で小規模のブログ勉強会を運営中

サエコをフォローする
サエコをフォローする
SAEKOSENSEI.com
タイトルとURLをコピーしました