ホバーすると画像を拡大します

役立つヒント: 進行中のプロジェクトでクラスを複製またはコピーする代わりに、 グローバルクラス または コンボクラス 拡大を目的とした画像に固有のクラスを確立します。 前述の手順に従って、カスタム コードに固有の拡大クラス名が含まれていることを確認します。 グローバル クラスとコンボ クラスの詳細をご覧ください。

プロジェクトを公開し、ライブ サイトに移動して、パーソナライズされたコードが実際に動作しているのを確認してください。クラス名を適用した画像 (クラス名「Magnify」で識別される画像など) にマウス カーソルを合わせると、画像上でカーソルをスライドさせると虫眼鏡がカーソルの動きを追跡します。

拡大ツールをカスタマイズする

デフォルトでは、虫眼鏡は 150 x 150 ピクセルの正方形です。サイズと形状を変更し、ドロップ シャドウ効果を導入してみましょう。

カスタム コードのデフォルト設定では、拡大鏡のサイズは 150 x 150 ピクセルに指定されています。拡大してみましょう。

1. アクセス ページパネル カスタマイズされた拡大コードを含むページでページ設定の歯車アイコンを選択します。
2. 下にスクロールして 前に </body> 鬼ごっこ ページ設定内のセクションに移動し、「magnifiersize: [150, 150]」というコード スニペットを特定します。
3. 両方の 150 ピクセル値をより大きな数値 (たとえば、それぞれ 300 ピクセル) に調整します。
4. 変更を保存します。

基本的なスタイルを新しいスタイルに設定して、拡大鏡の形を四角形から円形に変えてみましょう。 divブロック:

1. 開く ナビゲーター そして、 体 要素。
2. 利用する クイック検索 挿入する divブロック ページの最後の要素として。
3. を選択 divブロック、起動します スタイルパネルをクリックし、 セレクターフィールド.
4. クラス名を割り当てる divブロック カスタム コードが新しい拡大鏡の形状 (例: 「丸いループ」) を認識できるようにします。
5. アクセス スタイルパネル > 国境 定義する 半径 50%の。

この段階では、Div ブロックは楕円形に表示されますが、拡大鏡のサイズは、以前に設定した 300 ピクセルによって制御されます。

インサイダーヒント: プレス 指示 + え (Macの場合) または コントロール + え （Windowsの場合）トリガーする クイック検索 プロジェクトに要素をすぐに追加できます。

拡大鏡にさらに深みを持たせるために、その背後に影を入れてみましょう。

1. 選択してください divブロック.
2. アクセス スタイルパネル > 効果.
3. 組み込む ボックスシャドウ プラスアイコンを選択して、好みに応じて影をカスタマイズします。

私たちの「ラウンドループ」 divブロック 拡大鏡のスタイルにのみ影響するため、 divブロック ページに表示されません。非表示にしてみましょう:

1. 「丸ループ」を選択 divブロック.
2. 開く スタイルパネル > レイアウト.
3. 調整する 画面 に なし.
4. 公開 プロジェクトを実行してサイトを探索し、新しくスタイル設定された拡大鏡をプレビューします。

拡大ツールはモバイル ガジェットでも機能します。特にタブレットやスマートフォンなどのデバイスでは、画像をタップして拡大表示できます。

おめでとうございます！拡大機能により、画像の可能性が高まりました。