【Cocoon】アイキャッチ画像をホバー時に画像を拡大するカスタマイズ方法

Cocoonで投稿一覧のアイキャッチ画像をホバー時にふわっと拡大するカスタマイズ方法をご紹介します。

 

アイキャッチ画像をホバー時に画像を拡大する方法

追加CSSをカスタマイズ (コピペでOK!)

「外観」→「カスタマイズ」→「追加CSS」をクリックします。

下記のコードをCSSに追加して「公開」を押します。

するとアイキャッチ画像にマウスを乗せると拡大され、外すと元に戻ります。

/* アイキャッチ ホバーエフェクト */
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;
}

 

追加CSSの詳細説明

枠に収まらない部分のアイキャッチ画像は非表示にします。

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;
}