Diviで画像に適用できる3つのシームレスな変換ホバー効果

次のDiviWebサイトで画像を紹介するクールな方法をお探しですか？ この投稿では、ページの全体的なルックアンドフィールを向上させるのに役立つ3つの画像変換ホバー効果を処理するため、読み続けてください。 3つの異なる例のAからZのレクリエーションプロセスをたどることができ、すぐに使用できるようにダウンロードすることもできます。 このチュートリアルの主な目的は、Diviの新しい変換オプションを既存のオプションと組み合わせて美しいWebデザインを作成するように促すことです。

それを手に入れよう！

プレビュー

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

デスクトップ

例1

例2

例3

モバイル

例1

例2

例3

画像変換ホバー効果を無料でダウンロード

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

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

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

無料でダウンロード

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

ダウンロード

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

一般的な手順

新しいセクションを追加

間隔

それぞれの例を個別に再作成する前に、いくつかの一般的な手順を実行します。 次のマージンとパディング値を使用して、ページに新しい通常のセクションを追加します。

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

新しい行を追加

カラム構造

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

列2の背景色

モジュールをまだ追加せずに、行設定を開き、2番目の列に背景色を追加します。

• 列2の背景色：#efefef

サイジング

次にサイズ設定に移動し、行が画面の幅全体を占めるようにします。

• カスタムガター幅を使用：はい
• 側溝幅：1
• 列の高さを等しくする：はい
• 幅：100％
• 最大幅：100％

間隔

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

• トップパディング：0px
• ボトムパディング：0px
• 列2の上部パディング：10vw
• 列2の下部パディング：10vw
• 列2の左パディング：5vw
• 列2の右パディング：5vw

テキストモジュール＃1を列2に追加します

H2コンテンツを追加する

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

H2テキスト設定

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

• 見出し2フォント：Times New Roman
• 見出し2フォントの太さ：太字
• 見出し2のテキストの色：＃0f47ff
• 見出し2テキストサイズ：3.5vw

Dividerモジュールを列2に追加します

可視性

2番目の列で必要な次のモジュールはDividerモジュールです。 [仕切りを表示]オプションが有効になっていることを確認してください。

• 仕切りを表示：はい

色

次に、[デザイン]タブに移動し、仕切りの色を変更します。

• 色：＃ff961e

サイジング

サイズ値も変更します。

• 仕切りの重量：1px
• 幅：20％
• モジュールの配置：左
• 高さ：0px

間隔

そして、次の上部と下部のマージン値を使用して、モジュール用のスペースを作成します。

• トップマージン：1vw
• 下マージン：1vw

テキストモジュール＃2を列2に追加します

コンテンツを追加する

次のモジュール、つまり別のテキストモジュールに進みます。 選択した段落の内容を入力します。

テキスト設定

デザインタブに移動し、テキスト設定を変更します。

• テキストフォント：Open Sans
• テキストサイズ：0.7vw（デスクトップ）、1.7vw（タブレット）、2.5vw（電話）
• テキスト行の高さ：1.5vw（デスクトップ）、2.5vw（タブレット）、3.5vw（電話）
• テキストの向き：正当化

サイジング

サイズ設定も変更します。

• 幅：61％（デスクトップ）、80％（タブレットと電話）

間隔

そして、カスタムの上下マージンを追加します。

• トップマージン：2vw
• 下マージン：2vw

テキストモジュール＃3を列3に追加します

コンテンツを追加する

次の最後のモジュールでは、2番目の列に必要です。これは別のテキストモジュールです。 段落の内容を追加して、このモジュールをボタンとして使用します。

リンクを追加

CTAへのリンクを追加して続行します。

テキスト設定

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

• テキストフォント：Times New Roman
• テキストの色：＃ff961e
• テキストサイズ：1.5vw（デスクトップ）、2.5vw（タブレット）、3.5vw（電話）

サイジング

サイズ設定でもモジュールの幅を変更します。

• 幅：48％

間隔

次に、間隔設定に移動し、カスタムパディングを追加します。

• トップパディング：1vw
• ボトムパディング：1vw

国境

次の設定で下の境界線を追加して、テキストモジュールを完成させます。

• 下の境界線の幅：1px
• 下の境界線の色：＃0f47ff

セクションを2回クローンする

セクションとその中のすべての要素のカスタマイズが完了したら、先に進んで2回クローンを作成できます。 この投稿の冒頭で共有した3つの例を再現するために、ページの各セクションを使用します。

例1を再作成する

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

画像ボックスを空のままにします

最初の例から始めましょう！ 最初の列に新しい画像モジュールを追加し、画像ボックスを空のままにしてください。

デフォルトの背景色

画像モジュールの背景色を変更します。

• 背景色：＃0f47ff

背景色にカーソルを合わせる

ホバー時に背景色を変更します。

• 背景色：rgba（255,150,30,0.65）

背景画像

画像をアップロードする代わりに、次の設定を使用して、代わりに画像を背景に追加します。

• 背景画像サイズ：カバー
• 背景画像の位置：中央
• 背景画像の繰り返し：繰り返しなし
• 背景画像のブレンド：ソフトライト

間隔

モジュールの間隔設定に移動し、いくつかのカスタムパディング値を追加します。

• 画像の下にスペースを表示：いいえ
• トップパディング：22vw
• ボトムパディング：22vw

デフォルトの翻訳回転

また、ホバー時に画像を回転させます。 右のオプションに「0deg」を追加して、ホバーする前に画像が元の状態で表示されることを確認してください。

• 右：0度

ホバー翻訳回転

ホバー時にこの値を変更します。

• 右：180度

トランジション

即時効果を作成するために、遷移期間を削除します。

• 移行時間：0ms

例2を再作成する

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

画像ボックスを空のままにします

2番目の例に移ります！ 繰り返しになりますが、画像ボックスは空のままにしてください。

デフォルトの背景色

背景設定に移動し、次の（完全に透明な）背景色を追加します。

• 背景色：rgba（255,255,255,0）

背景色にカーソルを合わせる

ホバー時にこの色を変更します。

• 背景色：rgba（0,0,0,0.65）

背景画像

ここでも、モジュール自体にアップロードする代わりに、背景画像を使用しています。 背景画像を次の設定と組み合わせます。

• 背景画像サイズ：カバー
• 背景画像の位置：中央
• 背景画像の繰り返し：繰り返しなし
• 背景画像のブレンド：ソフトライト

間隔

次に、間隔の設定に移動し、上部と下部のパディングを変更します。

• 画像の下にスペースを表示：いいえ
• トップパディング：22vw
• ボトムパディング：22vw

デフォルトの変換スケール

デフォルトの変換スケール値が「100％」のままであることを確認してください。

• 右：100％
• 下：100％

ホバー変換スケール

そして、ホバー時にこれらの値を変更して、スケーリング効果を作成します。

• 右：120％
• 下：120％

デフォルトの変換変換

デフォルトでは、変換変換設定の一番下のオプションに「0px」を保持しています。

• 下：0px

ホバー変換翻訳

ホバー時にこの値を変更して、要素を再配置します。

• 下：9vw

トランジション

また、[詳細設定]タブで遷移期間を変更することにより、わずかに高速な遷移を作成しています。

• 移行時間：200ms

例3を再作成する

列構造の変更

次の最後の例に移りましょう！ 行の列構造を変更することから始めます。

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

1：1の画像をアップロード

次に、最初の列にイメージモジュールを追加します。 最初の2つの例とは対照的に、1：1の比率（同じ幅と高さ）で画像をアップロードします。

サイジング

[デザイン]タブに移動し、サイズ設定で画像を強制的に全幅にします。

• 全幅を強制：はい

間隔

次に、間隔設定で画像の下のスペースを削除します。

• 画像の下にスペースを表示：いいえ

デフォルトの境界線

次に、境界線の設定に移動し、各コーナーに「500vw」を追加します。 この値がすべての画面サイズをカバーするのに十分高いことを確認しています。

ホバーボーダー

ホバーで追加した丸い角を削除します。

デフォルトのフィルター

次に、フィルター設定に移動し、次のデフォルト値が追加されていることを確認します。

• 飽和度：100％
• 明るさ：46％
• 不透明度：3％

ホバーフィルター

変更した各設定でホバーオプションを有効にし、次の値を使用します。

• 飽和度：300％
• 明るさ：46％
• 不透明度：100％

デフォルトの変換スケール

次に、変換オプションに移動し、デフォルトの変換スケールオプションを変更します。

• 右：68％
• 下：68％

ホバー変換スケール

ホバー時にこれらの値を変更します。

• 右：130％
• 下：130％

デフォルトの変換変換

変換変換値に移動し、デフォルトの変換変換値が同じままであることを確認します。

• 右：0px
• 下：0px

ホバー変換翻訳

ホバー時に値を変更します。

• 右：1vw
• 下：8vw

トランジション

最後になりましたが、[詳細設定]タブで移行期間を長くして、スムーズな移行を作成すれば完了です。

• 移行時間：600ms

プレビュー

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

デスクトップ

例1

例2

例3

モバイル

例1

例2

例3

最終的な考え

この投稿では、画像モジュールとDiviのホバーおよび変換オプションを使用してクリエイティブにする方法を紹介しました。 私たちが再現した効果は、そこにある多くの美しい可能性のほんの一部です。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！

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