Wix プロギャラリー：アイテムのマウスオーバー表示をカスタマイズする

この記事内

ホバービューをカスタマイズする
よくある質問

楽しいホバー効果を適用すると、サイトに活気を与え、サイト訪問者がギャラリーを楽しめるようになります。

クリックせずにギャラリーアイテムにマウスオーバーすると、ホバービューが表示されます。マウスオーバーで表示される要素と、ホバー効果の見た目を選択できます。

ギャラリーアイテムにカーソルを合わせると、ギャラリーアイコン、タイトル、詳細が表示されるアニメーション。

ホバービューをカスタマイズする

オーバーレイを追加し、表示される情報とアイコンを選択し、スクロールアニメーションを適用して、ホバービューをカスタマイズします。利用可能なカスタマイズオプションは、選択したギャラリーレイアウトによって異なります。

マウスオーバー表示をカスタマイズする方法：

エディタにアクセスします。
ページ上のプロギャラリーをクリックします。
「設定」をクリックします。
「デザイン」タブをクリックします。
カスタマイズしたいホバー要素を選択します：

オーバーレイ・アイコン

オーバーレイは画像の上に配置され、カーソルで画像の上にマウスオーバーすると、更に効果を追加します。この効果とアイコンをカスタマイズできます。

「オーバーレイ・アイコン」をクリックします。
オーバーレイを選択し、利用可能なオプションを使用してカスタマイズします：
- フルオーバーレイ：オーバーレイはギャラリーアイテム全体をカバーします。以下のオプションを編集します：
  - グラデーション：トグルをクリックしてグラデーションオーバーレイを有効にし、オプションを編集します：
    - 不透明度・色 1 と 2：該当するカラーボックスをクリックしてグラデーションの色をカスタマイズします。スライダーをドラッグして、色の不透明度を調整します。
    - グラデーションの方向：スライダーをドラッグしてグラデーションオーバーレイの方向を指定します。
  - オーバーレイ色：カラーボックスをクリックして色を選択します。次に、スライダーをドラッグしてオーバーレイの色の不透明度を変更します。
  - アイコンの色：カラーボックスをクリックし、ギャラリーアイコンの新しい色を選択します。
- 部分オーバーレイ：オーバーレイはギャラリーアイテムの一部のみをカバーします。以下のオプションを編集します：
  - サイズを設定：オーバーレイのサイズをパーセントまたはピクセルで管理します。
  - サイズ：スライダーをドラッグするか、値を入力してオーバーレイのサイズを選択します。
  - オーバーレイの開始：オーバーレイを配置する位置を選択します。
  - 余白：スライダーをドラッグして、ギャラリーの枠線とオーバーレイの間のスペースを調整します。
  - グラデーション：トグルをクリックしてグラデーションオーバーレイを有効にし、オプションを編集します：
    - 不透明度・色 1 と 2：該当するカラーボックスをクリックしてグラデーションの色をカスタマイズします。スライダーをドラッグして、色の不透明度を調整します。
    - グラデーションの方向：スライダーをドラッグしてグラデーションオーバーレイの方向を指定します。
  - オーバーレイ色：カラーボックスをクリックして色を選択します。次に、スライダーをドラッグしてオーバーレイの色の不透明度を変更します。
  - アイコンの色：カラーボックスをクリックし、ギャラリーアイコンの新しい色を選択します。
オプションからオーバーレイ効果を選択します：
- なし：オーバーレイ効果は適用されません。
- フェードイン：オーバーレイがホバーで徐々に表示されます。
- 拡大表示：オーバーレイがホバーで展開されます。
- 上にスライド：オーバーレイがホバーでスライドします。
- 右にスライド：オーバーレイは、ホバーで右にスライドします。