CSSを使って商品カバー画像を上に浮かせる方法を詳しく解説

この記事では、商品カバー画像をタッチすると上に浮くようにCSSで実装する方法について説明しています。CSSで商品カバー画像をタッチすると上に浮くように実装する方法がわからない場合は、この記事を見てみましょう。 , 今日 CSS を書くときに実装する必要があるのは、写真と紹介文で構成される

ハイパーリンク

の上にマウスを置くと、ドリアンが上に浮き上がるということです。

この効果を実現するときの私のアイデアは次のステップに分かれています:

• マウスオーバー

• 画像の動き

• 以下の要素

  絶対配置

• 遷移時間を増やす

1. マウスホバー - 疑似クラスセレクターを追加します: hover 要素スタイルを変更するためにマウスをホバーしているときに最初に行われるのは、疑似クラス selector:hover を使用することを心がけます。これを書いているときに私が抱えている問題は、ハイパーリンクの上にマウスを移動すると、画像部分だけが移動し、テキストの導入部分は移動しないことです。したがって、疑似クラスを記述する場合、 #id a:hover を記述することはできませんが、その後にピクチャ部分 p のクラス セレクター、つまり #id a:hover .class {} を記述する必要があります。これにより、ハイパーリンクにカーソルを合わせて画像のみを移動できるようになります。

2. 画像の移動 - 要素のマージン/パディングを変更します

画像を移動するには、ホバリング時に画像の位置が上に移動するように画像の位置を変更します。移動の目的を達成するための要素のpadding属性

3. 下部要素の絶対位置

フローの影響により、画像の位置の移動は以下のテキストの紹介と価格の位置に影響します。つまり、全体的な動きは上向きになります。所定の位置に維持するには、その位置を絶対位置に変更する必要があります。これ以上の詳細は必要ありません。

4. トランジション時間を増やす -transition

トランジションを鈍くするためには、transition 属性を増やす必要があります。ただし、:hover にトランジション属性を追加することはお勧めできません。マウスが離れるとトランジション属性が消え、マウスが離れると硬くなりすぎてしまうためです。上記の .class など、移動する必要がある要素に、transition 属性を直接追加するだけです。

関連する推奨事項:

CSSフローティング要素のセンタリングについて

ページ画像のフローティング左右スライド効果の簡単な実装ケース

以上がCSSを使って商品カバー画像を上に浮かせる方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。