求人バナー_カバーに全体リンク_hover時エフェクト

【VK Patterns Library をはじめて利用する方へ】

VK Pattern Library のユーザー登録するには Lightning G3 Pro Pack か Vektor Passport のいずれかのライセンスが有効である必要があります。

ライセンスを購入する場合はこちら⇒１年・３年・５年

VK Pattern Library のユーザー登録は VWS のマイアカウントからのみとなります。

VK Pattern Library のユーザー登録の流れはこちらをご覧ください。

【VK Patterns Library のユーザー登録がお済みの方へ】

下記の機能はログイン時のみ利用可能です。利用したい場合はログインしてください。

ただし、Lightning G3 Pro Pack と Vektor Passport の両方のライセンスが無効である場合は利用できません。

ライセンスを購入する場合はこちら⇒１年・３年・５年

このパターンではテーマ「X-T9」「Lightning ( G3 / theme.json )」「Twenty Twenty-Four」「Twenty Twenty-Three」での使用を想定しています。他のテーマでは崩れる可能性がありますのでご注意ください。

このパターンではプラグイン「VK Blocks Pro (有料)」と、独自にカスタマイズしたCSSを使用しています。

キャッチフレーズ部分は、VK Blocks の「非表示設定」機能で、画面サイズごとに出しわけしています。
カバーブロックにVK Blocks Proの「カスタムCSS」で、hover時に薄い影がついて、ふわっと背景画像が拡大し半透明になるCSSを書いています。お好みで調整してください。
カバーブロック全体にリンクを設置していますので、カバーブロックからリンクを設定してください。
右下の三角はカバーブロックの色>背景をグラデーションで透明→カラー色にして設定しています。

背景のグラデーションについて詳細は、下の動画を参照してください。