2018年09月25日(火)

世界のエンジニアたちによる、滑らかで美しくそして効果的なホバー効果のコードスニペット集

• 0
• 0
• 1
• 8

ホバー効果は、長い間インタラクティブ性をウェブサイトに追加する最も簡単な方法の1つであり続けてきました。テキストリンクやボタンの強調表示に使用されることが最も一般的です。しかし、それらの使用は基本をはるかに超えています。

ホバー効果が特に効果的なのは、画像に適用されたときです。小さなカードレイアウトの一部であろうと巨大なヒーローイメージであろうと、相応しい特殊効果は大きな影響をもたらしてくれます。

この記事では、デザイナーがホバー効果を画像に統合するいくつかの創造的な方法を紹介します。これらは、自分のプロジェクトを劇的な方法で味付けする方法を私たちに示してくれるものです。

Dramatic Layers

CSSとJSを巧みに使って画像とレイヤーを複製し、それらを互いに重ねます。そこから、CSSフィルターが各画像に別々に追加されます。この技法は、他の方法では達成が困難な映画クラスの品質の効果をもたらします。