水平ホバーグリッドとDiviで隠されたオーバーフローを使用して画像を明らかにする方法

Diviの新しいサイズ設定オプションが発表されたので、ホバーリビールを作成する方法を示すチュートリアルをいくつか作成しました。 これらのチュートリアルでは、非表示のコンテンツは垂直に配置されていました。 ただし、場合によっては、代わりに水平方向のリビールを作成することもできます。 この投稿では、ホバーグリッドとDiviのオーバーフローオプションを使用して画像を表示する方法を紹介します。 この作品を作るには、少し異なるアプローチが必要です。 1列の行を使用し、すべてのモジュールを相互に下に配置し、ホバーすると、列を水平グリッドに変換します。 JSONファイルも無料でダウンロードできます！

それを手に入れましょう。

プレビュー

チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。

デスクトップ

モバイル

ホバーグリッドレイアウトを無料でダウンロード

無料のホバーグリッドレイアウトに手を置くには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

再作成を始めましょう！

私たちのYoutubeチャンネルを購読する

新しいセクションを追加

作業中のページに新しい通常のセクションを追加することから始めます。

新しい行を追加

カラム構造

次の列構造を使用して、新しい行を追加して続行します。

デフォルトのグラデーションの背景

モジュールをまだ追加せずに、行設定を開き、次のグラデーションの背景を追加します。

• 色1：＃b1ffc4
• 色2：#ffffff
• グラデーションタイプ：ラジアル
• 半径方向：中心
• 開始位置：28％
• 終了位置：28％

ホバーグラデーションの背景

ホバー時にグラデーションの背景を変更します。

• 色1：＃b1ffc4
• 色2：#ffffff
• グラデーションタイプ：ラジアル
• 半径方向：左
• 開始位置：5％
• 終了位置：5％

間隔

間隔の設定に移動し、次にパディングとマージンの値を変更します。

• トップパディング：0px
• ボトムパディング：0px
• トップマージン：50px
• 下マージン：50px

デフォルトの境界線

次に、右上隅と右下隅に「50px」の境界線半径を追加します。

ホバーボーダー

ホバー時にコーナーを「0px」に戻します。

デフォルトのボックスシャドウ

次に、次の設定を使用して微妙なボックスシャドウを追加します。

• ボックスシャドウブラー強度：50px
• 影の色：rgba（0,0,0,0.09）

ホバーボックスシャドウ

影の色を完全に透明な色に置き換えて、ホバー時にボックスの影を削除します。

• 影の色：rgba（0,0,0,0）

列にテキストモジュールを追加

H2コンテンツを追加する

テキストモジュールから始めて、モジュールの追加を開始します。 お好みのH2コンテンツを入力してください。

H2テキスト設定

[デザイン]タブに移動し、それに応じてH2テキスト設定を変更します。

• 見出し2フォント：Acme
• 見出し2フォントスタイル：下線
• 見出し2下線の色：＃00ff3f
• 見出し2のテキストの色：＃000000
• 見出し2テキストサイズ：3vw

間隔

次に、いくつかのカスタムパディング値を追加します。

• トップパディング：6vw
• ボトムパディング：7vw
• 左パディング：2vw

画像モジュールを列に追加

画像をアップロード

この列で必要な2番目のモジュールは画像モジュールです。 お好みの風景画像をアップロードしてください。

ライトボックス

次に、リンク設定でライトボックスオプションを有効にします。

• ライトボックスで開く：はい

サイジング

そして、サイズ設定で画像に全幅を強制します。 これにより、すべての画面サイズで画像の応答性が維持されます。

• 全幅を強制：はい

イメージモジュールを2回クローンする

最初のイメージモジュールを完了したら、先に進んで2回クローンを作成できます。

画像を変更する

両方の複製の画像を変更します。 アップロードする画像のサイズが最初の画像と同じであることを確認してください。

行にホバー効果を追加

サイジング

行とモジュールの基本設定が完了したので、ホバー効果を実現します。 行の高さと幅を変更し、オーバーフローを非表示にすることから始めます。 行のサイズ設定を開き、次の変更を加えます。

• カスタムガター幅を使用：はい
• 側溝幅：1
• 幅：20％
• 最大幅：100％
• 高さ：15.9vw

ホバーサイジング

ホバー時に幅を「100％」に戻します。 これにより、行にカーソルを合わせると画像が表示されます。

• 幅：100％

可視性

次に[詳細設定]タブに移動し、オーバーフローを非表示にします。 これにより、訪問者がテキストモジュールをホバー（デスクトップ）またはクリック（タブレット/モバイル）する前に、画像が非表示になります。

• 水平オーバーフロー：非表示
• 垂直オーバーフロー：非表示

トランジション

トランジション設定でトランジション期間も変更します。

• 移行時間：0ms

列ホバーの主要要素

ホバー時にグリッドを作成するには、列の設定を開き、[詳細設定]タブに移動して、ホバーのメイン要素に次のCSSコード行を配置します。

display: grid;
grid-template-columns: 20% 25% 25% 25%;
grid-gap: 10px;

行を2回クローンする

最初の行を完了したら、必要な回数だけクローンを作成できます。 この特定の設計例では、行のクローンを2回作成しています。

重複する行＃1のグラデーションの背景を変更する

2番目の行のグラデーションの背景の最初のグラデーションの色を変更します。

• 色1：＃ffdc96

重複する行＃2のグラデーションの背景を変更する

3行目も同じようにします。

• 色1：＃b7c7ff

両方の複製のテキストモジュールのコピーと下線の色を変更する

コピーと一緒に両方のテキストモジュールの複製の下線の色を変更して続行すると、完了です。

• 下線の色＃1：＃ffaa00
• 下線の色＃2：＃0037ff

プレビュー

すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。

デスクトップ

モバイル

最終的な考え

この投稿では、Diviのオーバーフローオプションを使用して、水平ホバーグリッドで画像を表示する方法を示しました。 画像は、deskopにカーソルを合わせ、タブレット/電話をクリックすると表示されました。 画像を公開しましたが、ビルダー内の設定を調整することで、必要なあらゆる種類のコンテンツを公開できます。 このチュートリアルが、独自の代替ホバーグリッドデザインを作成するきっかけになることを願っています。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！

Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。