Diviでマウスホバーで画像をスワップする方法

こんにちは、ナオミです!

前回の記事の後に、

「マウスホバーでスタイルの変え方はわかったけども、マウスホバーで画像を他の画像とスワップする方法はありますか?」

と言う質問をDiviサロンの方で頂きました。

前回の記事はこちらです。
Diviの使い方3、ホバーの設定【初心者必見】

さて、ホバーで画像をスワップする方法ですが、実は簡単です。

ホバー画像スワップ

こんな感じのマウスホバーエフェクトの作り方を説明します。

Diviの『行』に背景画像を設定

まずは、行に背景画像をセットします。

行に複数の列がある場合、それらは『カラム』として背景設定に表示されます。

Diviの使い方、ホバーで画像をスワップ。行の背景の設定

この上の画像ではカラム2となってますが、どのカラムなのかは行の中の列次第です。

行の高さが設定されてない場合は、このように背景画像は少ししか表示されません。

Diviの使い方、マウスオーバーで画像をスワップ2

Divi画像モジュールを挿入

Diviの使い方、ホバーで画像をスワップ。画像モジュールの挿入ステップ

先ほど、背景画像をセットした列へ行き、画像モジュールを挿入します。

このように、背景画像を完全に覆い尽くすように画像が挿入されます。

マウスホバー時に、画像を透明にする

このステップは前回の記事を読んでからのほうが、わかりやすいと思います。

Diviの使い方3、ホバーの設定【初心者必見】

デザインタブへいき、Filters→Opacityの設定に行きます。

Diviの使い方、マウスホバーで画像の透明度を変換前

Hoverのメニューを出し、Opacityを0にしましょう。

Diviの使い方、マウスホバーで画像の透明度を変換

そうするとこのように、背景画像が表示されます。

画像モジュールが透明になったからですね。

これで実は完成です。

前回の記事のように、詳細タブからアニメーションのスピードを変えることも出来ますよ。

下書きを保存してビジュアルビルダーを終了してみましょう。

ホバー画像スワップ

これでマウスホバー時での画像スワップ完成です。


いかがだったでしょうか?

結構簡単だったと思います。

この記事も動画も、Diviサロンで質問があったから作ることが出来ました。

もしあなたも何か質問があれば、Diviサロンで聞いてみませんか?

詳細はこちらから。

それではまた!

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です