【Luxeritas】カルーセルスライダーの画像の拡大・縮小設定
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;
}
以上で設定は終了です。
何かありましたらお気軽に言ってもらえればと思います。