Diviを使用して、ホバーでテキストモジュールを一意の人物の説明に変換する
公開: 2018-12-05画像に説明を追加する創造的な方法をお探しですか？ Diviに組み込まれているホバーオプションにより、これまで以上に簡単になりました。 このアプローチは、お客様の声からチームメンバーの説明まで、Webサイトでさまざまな目的に使用できます。 このチュートリアルでは、見事なWebデザインを実現するのに役立つ4つの異なる例を紹介します。 Diviの組み込みオプションのみを使用して4つの例すべてを作成しています。
それを手に入れよう！
プレビュー
ステップバイステップのチュートリアルに入る前に、さまざまな画面サイズでの最終結果を簡単に見てみましょう。
デスクトップ
モバイル
一般的な手順
新しいセクションを追加
このチュートリアルをわかりやすくするために、いくつかの一般的な手順から始めます。 その後、各例に固有の手順を処理します。 新規または既存のページに新しい通常のセクションを追加することから始めます。
行を追加する
カラム構造
先に進み、次の列構造を選択します（これは他の列構造でも機能します）。
列1の背景画像
モジュールをまだ追加せずに、行設定を開き、最初の列に背景画像を追加します。
- 列1の背景画像の繰り返し：繰り返しなし
サイジング
行のサイズ設定を変更して続行します。
- この行を全幅にする：はい
- カスタムガター幅を使用：はい
- 側溝幅：1
間隔
次に、いくつかのカスタムパディング値を追加します。
- トップパディング：150px
- ボトムパディング：150px
列1にテキストモジュールを追加
コンテンツを追加する
ホバーの説明を表示するために、4つの例のそれぞれにテキストモジュールを使用します。 先に進み、このテキストモジュールを背景画像を追加したのと同じ列に追加します。
デフォルトのテキスト設定
次に、テキスト設定に移動して、いくつかの変更を加えます。
- テキストの色：rgba（255,255,255,0）
- テキストサイズ：0.7vw（デスクトップ）、12px（タブレットと電話）
- テキストの向き：正当化
テキスト設定にカーソルを合わせる
ホバー時にテキストの色を変更します。
- テキストの色：＃000000
デフォルトの見出しテキスト設定
H3テキスト設定も変更します。
- 見出し3フォントの太さ：超太字
- 見出し3フォントスタイル：大文字
- 見出し3テキストの色：rgba（255,255,255,0）
- 見出し3テキストサイズ：2.5vw（デスクトップ）、40px（タブレット）、30px（電話）
- 見出し3行の高さ：2.2em
見出しのテキスト設定にカーソルを合わせる
そして、ホバーに別のH3テキストの色を適用します。
- 見出し3テキストの色：＃000000
行を3回クローンする
すべての一般的な手順を完了したので、先に進んで、作成した行を3回複製します。これにより、4つの例のそれぞれに1つの行を作成できます。 各例の最初で、次の行に移動することを確認してください。
例1
テキストモジュールの変更
デフォルトの背景色
最初の例から始めましょう！ 最初の列のテキストモジュールを開き、背景色を追加します。
- 背景色：rgba（255,255,255,0）
背景色にカーソルを合わせる
ホバー時にこの背景色を変更します。
- 背景色：rgba（255,255,255,0.73）
デフォルトの間隔
次に、カスタムマージンとパディングを追加します。
- トップマージン：-500px
- 下マージン：500px
- トップパディング：250px
- ボトムパディング：250px
- 左パディング：70px
- 右パディング：70px
ホバー間隔
ホバー時に値を変更します。
- 上マージン：0px
- 下マージン：0px
- トップパディング：100px
- ボトムパディング：100px
トランジション
最後に、[詳細設定]タブで遷移期間を長くして、スムーズな遷移を作成します。
- 移行時間：1000ms
例2
テキストモジュールの変更
デフォルトの背景色
次の例に移りましょう！ 最初の列のテキストモジュールを開き、背景色を追加します。
- 背景色：rgba（255,255,255,0）
背景色にカーソルを合わせる
ホバー時に背景色を変更します。
- 背景色：rgba（226,246,255,0.85）
デフォルトの間隔
次に、カスタムマージンとパディング値を追加します。
- トップマージン：100px
- 下マージン：100px
- トップパディング：150px
- ボトムパディング：150px
- 左パディング：70px
- 右パディング：70px
ホバー間隔
ホバー時にこれらの値を変更します。
- トップマージン：200px
- 下マージン：-200px
- 左マージン：50px
- トップパディング：100px
- ボトムパディング：100px
デフォルトの境界線
テキストモジュールに境界線を追加して続行します。
- 左ボーダー幅：0px
- 左の境界線の色：#ffffff
ホバーボーダー
そして、ホバー時に境界線の幅を変更します。
- 左ボーダー幅：8px
トランジション
最後になりましたが、スムーズな移行のために移行期間を長くしてください。
- 移行時間：500ms
例3
クローンテキストモジュール
3番目の例に移ります！ この例では、画面サイズを小さくするために別のバージョンを作成する必要があります。 最初の列のテキストモジュールのクローンを作成します。
列1のグラデーションの背景を追加
次に、行の設定を開き、次の設定を使用して最初の列にグラデーションの背景を追加します。
- 色1：rgba（43,135,218,0）
- 色2：#ffffff
- 列1グラデーションタイプ：ラジアル
- 列1の半径方向：中心
- 列1の開始位置：59％
- 列1の終了位置：59％
- 列1背景画像の上にグラデーションを配置：はい
テキストモジュール＃1の変更
グラデーションの背景
列1の最初のテキストモジュールを開きます。これは、デスクトップに表示される説明になります。 グラデーションの背景を追加します。
- 色1：rgba（239,239,239,0.65）
- 色2：rgba（255,255,255,0）
- グラデーションタイプ：ラジアル
- 半径方向：中心
- 開始位置：70％
- 終了位置：71％
デフォルトの間隔
次に、カスタムマージンとパディング値を追加します。
- トップマージン：6vw
- 下マージン：6vw
- トップパディング：9vw
- ボトムパディング：9vw
- 左パディング：2vw
- 右パディング：2vw
ホバー間隔
ホバー時にマージン値を変更します。
- 左マージン：15vw
- 右マージン：-15vw
可視性
そして、タブレットと電話でモジュールを無効にします。
トランジション
移行期間も長くします。
- 移行時間：500ms
テキストモジュール＃2を変更する
グラデーションの背景
列1の2番目のモジュールは、小さい画面サイズに表示される説明です。 グラデーションの背景を追加することから始めます。
- 色1：rgba（239,239,239,0.65）
- 色2：rgba（255,255,255,0）
- グラデーションタイプ：ラジアル
- 半径方向：中心
- 開始位置：70％
- 終了位置：71％
デフォルトの間隔
次に、カスタムマージンとパディング値を追加します。
- トップマージン：95px
- 下マージン：95px
- トップパディング：170px
- ボトムパディング：170px
- 左パディング：20px
- 右パディング：20px
ホバー間隔
ホバー時にマージン値を変更します。
- トップマージン：250px
- 下マージン：-200px
可視性
そして、デスクトップでモジュールを無効にします。
両方のテキストモジュールのテキストの向きを変更する
大事なことを言い忘れましたが、望ましい結果を達成するために、両方のモジュールのテキストの向きも変更するようにしてください。
- テキストの向き：中央
例4
テキストモジュールの変更
デフォルトの背景色
4番目で最後の例に移ります！ 次の背景色を列1のテキストモジュールに追加します。
- 背景色：rgba（255,255,255,0）
背景色にカーソルを合わせる
ホバー時にこの背景色を変更します。
- 背景色：rgba（255,255,255,0.72）
デフォルトの間隔
次に間隔設定に移動し、そこにカスタムマージンとパディング値を追加します。
- 左マージン：-200px
- 右マージン：200px
- トップパディング：250px
- ボトムパディング：250px
- 左パディング：70px
- 右パディング：70px
ホバー間隔
ホバー時にこれらの値を変更します。
- 左マージン：0px
- 右マージン：0px
- トップパディング：300px
- ボトムパディング：300px
トランジション
最後になりましたが、スムーズな移行のために移行期間を長くしてください。
- 移行時間：1200ms
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最後に見てみましょう。
デスクトップ
モバイル
最終的な考え
この投稿では、Diviのホバーオプションをクリエイティブに使用して、ホバーで人物の説明を紹介する方法を紹介しました。 これらの4つの例を使用すると、紹介文やチームメンバーの説明をページ上のインタラクティブなデザイン要素に変換する準備が整います。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！