AI要約
WPFormsの画像選択のラベルの視覚的な魅力を高めたいですか？チェックボックスまたは複数選択フィールドで画像選択を使用している場合でも、CSSを使用して魅力的なホバー効果を作成し、ラベルをスタイル設定できます。
このガイドでは、画像選択のラベルをカスタマイズして、よりインタラクティブで視覚的に魅力的なフォームエクスペリエンスを作成するためのいくつかの方法を紹介します。
フォームの設定
まず、フォームを作成し、フィールドを追加しましょう。ここでは、画像選択を使用するチェックボックスフィールドも追加します。
画像選択の設定方法についてサポートが必要な場合は、画像選択の設定方法に関するガイドをご覧ください。
画像選択ラベルのカスタマイズ
これらのCSSの例は、画像選択ラベルのさまざまな視覚効果を作成するのに役立ちます。すべての例で、form#wpforms-form-1000を独自のフォームIDに置き換えることを忘れないでください。フォームIDの見つけ方がわからない場合は、フォームおよびフィールドIDの見つけ方に関するガイドを確認してください。
ホバー時にラベルをオーバーレイ
このスタイルは、ユーザーがホバーしたときにラベルが画像の上に表示される、エレガントなオーバーレイ効果を作成します。
境界線とボックス効果を追加
境界線とボックスのプロパティを使用して、ラベルの周りにフレーム、境界線、または角丸を作成します。
form#wpforms-form-1000 .wpforms-field .wpforms-image-choices-label {
border-radius: 5px;
border: 1px solid #ccc;
padding: 5px;
}
ホバー時に画像を回転
transform CSSルールを適用することで、画像に楽しいひねりを加えます。ホバーすると、画像はエレガントに回転し、フォームに遊び心のあるインタラクティブな要素が注入されます。この魅力的な効果は、訪問者が画像の選択をナビゲートする際に魅了します。
form#wpforms-form-1000 .wpforms-field .wpforms-image-choices-item:hover {
transform: rotate(10deg);
}
ホバー時にボックスシャドウ
ホバー時にボックスシャドウ効果を実装し、ホバー時のデフォルトの境界線を削除することで、画像に深みと次元のタッチを追加します。訪問者が各画像をスライドさせると、微妙な影が優雅に現れ、フォームに魅惑的な深みとインタラクティブ性を与えます。
form#wpforms-form-1000 .wpforms-image-choices label:hover {
border: none;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
複数の効果を組み合わせる（ホバー時に境界線、ラベル、ボックスシャドウ）
この最後の例では、すでに使用したCSSの一部を組み合わせます。
画像をホバーすると、画像の上にラベルが表示されます。
これらは、画像選択のラベルを簡単にカスタマイズできるほんの一例です。画像周りの空白を削除したいですか？画像選択の周りの空白を削除する方法に関する記事をご覧ください。