Diviの使い方3、ホバーの設定

Diviのホバーの設定【初心者必見】

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

今回はDiviのホバーの設定を紹介します。

Diviのホバーの設定を動画でご覧になりたい方はこちらからどうぞ!

Diviの使い方、ホバーの設定2

こんな感じのエフェクトをマウスカーソルがホバーした時に作ることができます。

これはCSSの:hoverを使っています。ですが、DiviではCSSを一切使わずともこの設定ができてしまいます。

画像モジュールを使って、この上のホバーのアニメーションをどう作るのか説明します。

Diviモジュールでホバー前の初期値を設定する

まずは画像モジュールで適当な画像を入れます。

Diviの使い方、ホバーの設定の仕方1

次にホバー前の初期値を設定します。

マウスのカーソルが上に来る前の状態です。

ボーダーを入れる

Diviの使い方、ホバーの設定2

こんな感じでボーダーを入れました。

色を白黒にする

Diviの使い方、ホバーの設定3。Filterの彩度を0%にしました。

Filterの彩度を0%にしました。

これで準備完了です。

Diviモジュールでホバーを設定する

それでは次にホバー状態のスタイルを設定します。

ボーダーの幅のホバー設定

まず先程、ボーダーの幅をセットした境界の設定のところに戻ります。

Diviの使い方、ホバーの設定画面を出す1

ボーダー幅の設定のところにマウスを持っていくと、この矢印のアイコンが出ますので、それをクリックします。この矢印アイコンがhoverの設定ボタンです。

Diviの使い方、ホバーの設定画面を出す3

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

ここでHoverをクリックします。

そしてボーダーの幅の値を0にします。

Diviの使い方、ホバーの設定4

そうすると、画像のボーダーが無くなります。

次に初期設定のタブに戻してみます。

Diviの使い方、ホバーの設定画面、初期設定タブ

これでボーダーの幅のホバーの設定は完了です。

Filterの彩度のホバー設定

次に同じようにFilterの彩度に行き、ホバーの設定を開きましょう。

Diviの使い方、彩度のホバー設定画面

そしてHoverタブで彩度を100%にセットします。

これで準備は整いました。

保存してビジュアルビルダーを終了しないと、ホバーをテストできない

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

そしてマウスカーソルを画像の上にもっていきましょう。

Diviの使い方、ホバーの設定2

こんな感じのエフェクトが見れたら、成功です!

Diviモジュールのホバーアニメーションのスピードを変える

このアニメーションのスピードを変えることもできます。

このモジュールの設定画面の『詳細』→『Transitions』に行きます。

Diviの使い方、ホバーアニメーションのスピードをコントロールする方法

Transition Duration

これはアニメーション全体でどのくらいの時間がかかるのかというのを設定します。

1000msが1秒です。

Transition Delay

これはアニメーションが始まる前に、どのくらいの時間を待つのかというのを設定します。

例えばこの値を500msに設定すると、ホバー後に0.5秒待ってからアニメーションが始まります。

Transition Speed Curve

これはアニメーションのスピードの上がり下がりを設定します。

  • ease-in ゆっくりアニメーションが始まって、どんどん加速します
  • ease-out 最高速でアニメーションが始まり、どんどん減速します
  • ease-in-out ゆっくり始まり、加速してアニメーションの中間で最高速になり、最後はゆっくり終了します
  • ease ease-in-out とほぼ同じですが、始まりの方がわずかに終了時のスピードより速いアニメーションです
  • 線形 一定の速度でアニメーションします

色々と試してみましょう。


Diviを使えばこんな簡単に、ホバーの設定だけでなくアニメーションまでコントロールできてしまいます。

色々と作ってみましょう!

Diviの基本を学びたい方におすすめの記事はこちら

NoCodeWebではDivi初心者の方でもスムーズにWebサイト制作が始められるよう、様々なチュートリアル記事を随時更新しております。Diviの使い方をコラから学びたい方は必見です。

Diviのビジュアルビルダーの基本【初心者必見】

Diviモジュール設定の基本【初心者必見】

Diviを使わずに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に精通