Description détaillée de la méthode de réalisation de l'image de couverture du produit pour flotter vers le haut en utilisant CSS

Cet article décrit comment réaliser la retouche flottante de l'image de couverture du produit en css Si vous ne savez pas comment réaliser la retouche flottante de l'image de couverture du produit en css, Jetons un coup d'œil à cet article ! ,

Aujourd'hui, en écrivant du CSS, je dois réaliser : lorsque la souris survole le lien hypertexte composé d'images et d'introductions, le durian flottera vers le haut.

Mon idée pour obtenir cet effet est divisée en les étapes suivantes :

• Survol de la souris

• L'image se déplace en dessous

• Élément positionné de manière absolue

• Augmenter le temps de transition

1. Survol de la souris - ajouter un pseudo- sélecteur de classe  : survol

Lorsque la souris survole pour changer le style de l'élément, la première chose qui vient à l'esprit est pour utiliser un sélecteur de pseudo-classe :hover. Le problème que j'ai en écrivant ceci est que le survol du lien hypertexte ne fait que déplacer la partie de l'image, mais pas la partie d'introduction du texte. Par conséquent, lors de l'écriture d'une pseudo-classe, vous ne pouvez pas écrire #id a:hover, mais devez être suivi du sélecteur de classe de la partie image p, c'est-à-dire #id a:hover .class {}. Cela vous permet de survoler le lien hypertexte et de déplacer uniquement l'image.

2. Mouvement de l'image - modifiez la marge/le remplissage de l'élément

Pour faire bouger l'image, vous devez changer la position de l'image afin que l'image la position monte en survol, nous pouvons alors modifier les attributs de marge ou de remplissage de l'élément pour atteindre l'objectif du mouvement

3 Le positionnement absolu de l'élément en dessous

En raison de l'influence du flux, le mouvement de la position de l'image affectera la position inférieure de l'introduction du texte et du prix, c'est-à-dire que le mouvement global est vers le haut. Pour qu'il reste en place, il convient de changer sa position en positionnement absolu, inutile d'entrer dans les détails.

4. Augmentez le temps de transition-transition

Afin de rendre la transition moins brutale, vous devez augmenter l'attribut de transition. Il faut cependant noter qu'il n'est pas recommandé d'ajouter l'attribut transition dans :hover, car lorsque la souris s'éloigne, l'attribut transition disparaît, ce qui le rend trop raide lorsque la souris s'éloigne. Ajoutez simplement l'attribut de transition directement à l'élément qui doit être déplacé, comme le .class ci-dessus.

Recommandations associées :

À propos du centrage des éléments flottants CSS

Un cas simple d'implémentation de l'effet de glissement flottant vers la gauche et la droite des images de page

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!