Divi-画像にマウスホバーでテキストを表示させる方法

Divi-画像にマウスホバーでテキスト表示させる方法2

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

今日はこんな感じの、画像の上にマウスを持って来た時に、テキストを表示させる方法を紹介します。

Diviホバーテキスト表示

それでは始めます。

Diviの『行』の背景画像をセットする

Diviで画像の上にマウスが来た時にテキストを表示させる手順

行を作成したら、その行の設定へ行き背景を設定します。

カラムというのは、列の意味です。一列目ならカラム1の背景を設定します。

Diviの画像の上にマウスを持ってきてテキストを表示させるてじゅん1.2

このような感じに背景画像が行の列に表示されます。

Diviの『テキストモジュール』の設定

まずはテキストモジュールを上で背景を設定した行の列に挿入しましょう。

Diviの画像の上にマウスを持ってきてテキストを表示させる手順、テキストモジュールを挿入

こんな感じにテキストが画像の上に表示されます。

テキストに半透明の背景色を設定

Diviの画像の上にマウスを持ってきてテキストを表示させる手順、テキストモジュールを挿入、そして背景色の設定

このように、テキストモジュールに背景色を設定しましょう。

テキストの余白と色を直す

見にくいので、見やすいようにします。

Diviの画像の上にマウスを持ってきてテキストを表示させる手順、テキストモジュールを直す

こんな感じにしました。

画像にホバーエフェクトを設定する

画像と書いてますが、実際はテキストモジュールにホバーの設定をします。

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

Diviの画像の上にマウスを持ってきてテキストを表示させる手順、opacityの設定

上の画像の矢印のアイコンをクリックしましょう。

Diviの画像の上にマウスを持ってきてテキストを表示させる手順、opacityの設定ホバー

このように初期設定とHoverというタブが出てきます。

テキストモジュールの初期設定

次に初期設定が選択された状態で、Opacityを0にします。

Diviの画像の上にマウスを持ってきてテキストを表示させる手順、opacityの設定ホバー初期設定

このように、テキストが完全に見えなくなります。

テキストモジュールのホバー設定

次にHoverを選択します。

Diviテキストモジュールのホバー設定

ここで初期設定タブをクリックして、もう一度Hoverをクリックしてみてください。

テキストが消えたり出たりすれば成功です。

ビジュアルビルダーを閉じてみましょう。

Diviホバーテキスト表示

ホバーでテキストが表示されます。

完成です!

テキストにリンクをつけることも出来ますね。


いかかでしたか?

前回のホバーで画像スワップと同様、簡単だったのではないかと思います。

何か質問やリクエストがあれば、コメントかDiviサロンでお願いします。

動画を作るか記事を書きますので!

それでは。

コメントする

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