【Luxeritas】カルーセルスライダーの画像の拡大・縮小設定

プログラミング系列サムネイル画像1

Luxeritasにはデフォルトでカルーセルスライダーを表示する機能があります。
今回は、このカルーセルスライダーにポインタを置いたとき・離した時のアニメーションを設定します。

ホバー時のカルーセルスライダーのアニメーション

以下条件で設定を行います。

  • 表示範囲は固定
  • カルーセルスライダーの要素にポインタを置いたとき、画像のみ拡大・縮小

追加するCSSコード

以下のCSSコードを子テーマのスタイルシートに追加します。
Luxeritas以外の方は、お使いのテーマに応じて、「.swiper-container」や「swiper-slide」の記述を変更してください。

/* カルーセルスライダー */
/*  拡大縮小ホバー設定*/
.swiper-container a:hover img{
	transform:scale(1.1,1.1);
}
a.swiper-slide img, a.swiper-slide img:hover {
    transition: 0.3s ease-in-out;
}

以上で設定は終了です。

何かありましたらお気軽に言ってもらえればと思います。

参考: https://nakazilab.com/mouse-over-zoom-photo/