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

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

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

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

Diviホバーテキスト表示

それでは始めます。

Diviで画像にマウスホバーでテキストを表示させる方法を動画でご覧になりたい方はこちらからどうぞ!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

こんな感じにしました。

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

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

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

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

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

矢印のアイコンがhoverの設定ボタンです。

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

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

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

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

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

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

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

次にHoverを選択します。

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

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

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

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

Diviホバーテキスト表示

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

完成です!

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


いかかでしたか?

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

Diviの行を使いこなす

Diviはセクション→行→モジュールを組み合わせてページを作っていきます。
行についてのテクニックはこちらの記事でも解説していますので、ぜひ参考にしてください。

Diviの行をスマホでも複数列で表示する方法【便利】

Diviでスマホ上で列を自由に並びかえる方法

Diviで全幅画面を均等に二分割するレイアウトの作り方

様々なテクニックを駆使してDiviを使いこなせ!

セクション・行・モジュールの設定の他にもDiviには様々なテクニックが存在します。ちょっとした手間を加えることで、デフォルトではできなかったことができるようになり、デザインの幅が今までより広がります。

下の記事ではDiviの様々なテクニックを紹介していますので、ぜひ合わせてご覧ください。

Diviでプラグイン無しでGoogle Analyticsを設定する方法

Diviのアイコンをメニューに表示させる方法【プラグイン不要】

Diviのトップに戻るボタンをカスタマイズ

Divi、モバイルメニューのどこをクリックしてもメニューを表示させられる方法

Diviのことをもっと深く知りたい方は、Diviの使い方完全ガイドをご覧ください。

コードを書かないウェブ制作を目指すコミュニティ『TOFUラボ』

Diviの最新情報を知りたいなら、ノーコードでWEBサイト制作を支援するサロン『TOFUラボ』に参加しませんか?
私が運営してるノーコードでWEBサイト制作を支援するのコミュニティです。

最新情報だけではなく技術的な質問も飛び交っています。

また、デザインやSEOなどWEBサイト制作に関する様々な勉強会も開催されています。

『TOFUラボ』の紹介はこちらです

興味があれば、是非参加してくださいね。
入会してから7日間は無料で合わないなと思えばいつでもキャンセル可能です。

それでは。

Naomi Suzuki

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴20年。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

コメントする

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

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。 

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通